Implement HTTP data fetching in Angular v20+ using resource(), httpResource(), and HttpClient. Use for API calls, data loading with signals, request/response…
Signal-based HTTP data fetching with httpResource(), resource(), and HttpClient for Angular v20+.
httpResource() provides reactive HTTP requests with automatic refetching when dependencies change, built-in loading/error states, and manual reload/set/update actions
resource() handles generic async operations with conditional loading, abort signal support, and customizable default values
Functional interceptors for authentication, error handling, and logging integrate via withInterceptors() in app configuration
Status-driven UI patterns using @switch on status() signal ('idle', 'loading', 'reloading', 'resolved', 'error') simplify loading states and error recovery
Angular HTTP & Data Fetching
Fetch data in Angular using signal-based resource(), httpResource(), and the traditional HttpClient.
httpResource() - Signal-Based HTTP
httpResource() wraps HttpClient with signal-based state management:
import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
interface User {
id: number;
name: string;
email: string;
}don't have the plugin yet? install it then click "run inline in claude" again.