angular-http_skill

Overview

This skill explains HTTP data fetching patterns in Angular v20+ using signal-aware helpers resource() and httpResource(), plus traditional HttpClient usage. It focuses on reactive, declarative data loading with signals, request/response handling, interceptors, and common error/loading patterns. You’ll get concise guidance for migrating Observable-based flows to signal-first designs and for combining approaches when needed.

How this skill works

httpResource() wraps HttpClient calls into a signal-backed resource that auto-triggers when reactive params change and exposes status, value, error, and actions (reload, set, update). resource() provides a generic signal-based loader for any async operation, supporting params, defaultValue, and abortable fetch logic. HttpClient remains available for Observable-based pipelines and can be converted to signals with toSignal() for integration.

When to use it

• Use httpResource() when you want automatic re-fetching tied to signals and simple HTTP request configuration.
• Use resource() for non-HTTP async logic or when you need custom loader behavior, abort signals, or conditional loading.
• Use HttpClient when you need fine-grained Observable operators, retries, or streaming patterns.
• Convert Observables to signals with toSignal() to unify UI state with signal-based components.
• Add interceptors for cross-cutting concerns like auth headers, logging, or centralized error handling.

Best practices

• Return undefined from params to skip loading and keep status 'idle' until ready.
• Provide defaultValue when you want value() to never be undefined and simplify templates.
• Keep UI reactive: read resource.status(), isLoading(), hasValue(), and error() for concise templates.
• Use functional HttpInterceptorFn to inject services and keep request logic testable and composable.
• Prefer httpResource() for simple CRUD views and HttpClient + rxjs operators for complex retry/streaming needs.

Example use cases

• User profile page that auto-reloads when a userId signal changes.
• Search component using resource() with abortable fetch and params driven by the query signal.
• Admin list using toSignal(this.http.get(...), { initialValue: [] }) to bridge existing services to signal-based UI.
• Global interceptors to attach auth tokens, handle 401 redirects, and log request timings.
• Forms that submit via HttpClient POST and update a local httpResource() with set() or reload() on success.