httpResource is Angular’s signal-native way to fetch data through HttpClient: it starts requests eagerly, exposes loading, error, and value state as signals, and reruns when signals used to build the request change. Use it for reads; for mutations such as POST and PUT, use HttpClient directly. Angular’s API reference marks httpResource stable since v22.0.
What httpResource does
A plain HttpClient call returns an Observable; the request is sent when that Observable is subscribed to. httpResource instead initiates the request eagerly and represents its result with resource state. Angular tracks signals read while the request is built, so changing one of those signals issues a new request. If an earlier request is still pending when a new one starts, Angular cancels the outstanding request.
As an Amazon Associate I earn from qualifying purchases.
Because it uses Angular’s HTTP stack, httpResource works with HttpClient features such as interceptors and the HTTP testing APIs. It exposes resource state synchronously as signals rather than returning the request Observable. See Angular’s httpResource guide and HttpClient request guide.
Build a request from reactive state
Configure the HTTP client in the application, then define a resource where the needed data is available, such as in a component. This example assumes provideHttpClient() is configured and that userId is a signal:
#1 Best Overall
import { httpResource } from '@angular/common/http';
readonly userId = signal('42');
readonly user = httpResource<User>(() =>
`/api/users/${this.userId()}`
);Reading this.userId() inside the request function makes it a reactive dependency. When the ID changes, the resource issues a request for the new URL. You can also return a request-options object when you need headers, parameters, or other HttpClient request settings; make any property that should update reactively depend on signals. Returning undefined represents the absence of a request, which is useful when required input is not yet available.
Use provideHttpClient(...) to configure client features such as interceptors or XSRF options. The resource uses that configured client rather than a separate HTTP stack.
Render loading, error, and success states safely
Resource state is intended to drive the UI directly. Check hasValue() before reading value(): Angular warns that reading the value in an error state throws at runtime, and the guard also distinguishes an available result from undefined.
Free tools Windows power users keep installed
One-click scans. No signup required.
<!-- Example Angular template -->
@if (user.hasValue()) {
<h2>{{ user.value().name }}</h2>
} @else if (user.error()) {
<p>Could not load this user.</p>
} @else if (user.isLoading()) {
<p>Loading user…</p>
}In addition to hasValue(), value(), error(), and isLoading(), the resource reference includes status, snapshot, reload, and writable-value operations. The HTTP-specific reference also provides response headers, status code, and progress. Consult Angular’s HttpResourceRef API reference for the current members and types.
Rank #3
Choose the response type and validate data
The default httpResource response is JSON. That does not mean the incoming payload has been runtime-validated against a TypeScript type: a generic type annotation only describes the expected type to TypeScript. If data must be checked before it reaches application code, supply a parse function that performs those checks and returns a validated or transformed value. A runtime schema library can be used inside the parser. Angular’s HttpResourceOptions API reference documents the option.
For non-JSON responses, use the matching constructor:
httpResource.text()for a string response;httpResource.blob()for aBlob;httpResource.arrayBuffer()for anArrayBuffer.
A parser’s return type determines the inferred result type, but the parser must itself implement any runtime validation or transformation the application needs.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Track download progress when needed
Set reportProgress: true in the request options to enable download progress, then read the resource’s progress() signal. For httpResource, this is the relevant setting; it enables download progress only, not upload-progress tracking. Angular documents the option in its reactive data-fetching guide.
Choose between httpResource, HttpClient, and resource
| Option | Best fit | Behavior and integration |
|---|---|---|
httpResource |
HTTP reads where a component benefits from signal-based state and automatic updates when request dependencies change. | Eager request; exposes resource signals; uses the configured HttpClient stack, including interceptors and HTTP testing support. |
Direct HttpClient |
Mutations such as POST and PUT, or cases where the Observable request API better fits the flow. |
Returns an Observable; the request starts on subscription. Use the client APIs directly for mutations, as Angular advises. |
Core resource |
Asynchronous work defined by a loader when an HTTP-specific client integration is not needed. | A general resource API with reactive parameters and cancellation behavior; it does not provide HttpClient-specific integration. See Angular’s resource guide. |
Test an httpResource request
Use the HTTP testing utilities rather than replacing the resource with a hand-written mock. Configure provideHttpClientTesting(), obtain an HttpTestingController, trigger the resource effect using the test APIs, match the request, flush a response, and await application stability before asserting the signal value. Angular’s httpResource guide contains the current testing setup and details.
Version and stability
Angular’s httpResource API reference lists the API as stable since v22.0. Check that reference when upgrading, because release status and API details can change in later Angular versions.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Recommended Free Tools
