skills.rest
Blotch-Smart-Frames
Blotch-Smart-FramesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

angular-http

Implement HTTP data fetching in Angular using resource(), httpResource(), and HttpClient.

Updated Feb 9, 2026
Search Tags:#data fetching#angular#api integration#signals#http#interceptors#httpclient
One-click install
npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-http-blotch-smart-frames
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: angular-http
Source: https://github.com/Blotch-Smart-Frames/Board/tree/main/packages/client/.claude/skills/angular-http
Command: npx skills add https://github.com/Blotch-Smart-Frames/Board --skill angular-http-blotch-smart-frames

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Angular developers need consistent patterns for API calls, loading states, and error handling, especially when migrating from Observable-based HttpClient code to signal-based data fetching in Angular v20+. ## Core Features & Use Cases - Signal-Based HTTP: Use httpResource() and resource() for reactive data fetching with built-in loading, error, and reload states. - Traditional HttpClient: Covers GET/POST/PUT/PATCH/DELETE, request options, functional interceptors, and RxJS error handling. - Advanced Patterns: The references file documents service layers, caching, pagination, file upload, request cancellation, and HTTP testing with HttpTestingController. - Use Case: When building a user profile page that refetches data whenever the selected user ID changes, use httpResource() with a reactive params function and render loading, error, and resolved states with @switch. ## Quick Start Ask the AI to implement an Angular component that fetches data from an API endpoint using httpResource with loading and error states.

Frequently Asked Questions about angular-http

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fetch API data in Angular using signals?▼

Use httpResource() from @angular/common/http with a reactive request function that reads signals. It automatically refetches when those signals change and exposes value(), isLoading(), error(), and reload() for state management.

What is the difference between httpResource and HttpClient in Angular?▼

httpResource wraps HttpClient with signal-based state, giving you loading, error, and reload handling declaratively. HttpClient returns Observables and suits complex scenarios needing RxJS operators, which you can bridge with toSignal().

How do I add an auth token to Angular HTTP requests?▼

Create a functional interceptor implementing HttpInterceptorFn that clones the request with an Authorization header, then register it via provideHttpClient(withInterceptors([authInterceptor])) in your application config.

How do I test Angular components that use httpResource?▼

Configure TestBed with provideHttpClientTesting(), inject HttpTestingController, and use expectOne() to match the request URL. Flush a mock response and assert on the resource's value() signal.

When should I use resource() instead of httpResource()?▼

Use resource() for non-HTTP async operations or custom fetch logic, since it accepts any loader function with params and an abortSignal. Use httpResource() when you are making standard HTTP calls through Angular's HttpClient.

Related Skills

Explore More Software Engineering Skills→
analogjsanalogjs
595

angular-component

Designs Angular v20+ standalone components with signal-based inputs/outputs and content projection.

Official
Advanced
oakossoakoss
1

tanstack-query

Manage React server state with TanStack Query caching and background updates.

Official
Advanced
oguzhan18oguzhan18
6

angular-interceptors

Intercept Angular HttpClient requests and responses for authentication, logging, and error handling.

Community
Intermediate
nekorush14nekorush14
4

react-state-management

Manage React client state with Context API and server state with TanStack Query.

Community
Advanced