Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular’s httpResource is a signal-based way to fetch data through HttpClient. It starts requests eagerly, exposes loading, error, and value state as signals, and automatically requests fresh data when signal values used to build the request change. It is designed for reads; use HttpClient directly for mutations such as POST and PUT.
Angular’s API reference lists httpResource as stable since Angular v22.0. Check the current API reference for the status that applies to the Angular version in your project.
How httpResource works
httpResource wraps Angular’s HTTP client in a resource. Unlike a plain HttpClient Observable, which sends its request when subscribed, an httpResource starts the request eagerly. Angular tracks signal values read while creating the request and issues a new request when those dependencies change. If an earlier request is still pending when a new one is issued, the pending request is canceled.
The resource uses the existing HttpClient stack, so it can work with configured HTTP features such as interceptors. Its result is exposed through resource signals rather than as the request Observable.
#1 Best Overall
Fetch data from a signal
For a request that depends on a signal, read that signal inside the URL-producing function. Angular tracks the read and reruns the request when the ID changes.
import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
@Component({
selector: 'app-user',
template: `
<button (click)="userId.set(userId() + 1)">Next user</button>
@if (user.hasValue()) {
<pre>{{ user.value() | json }}</pre>
} @else if (user.error()) {
<p>Could not load the user.</p>
} @else if (user.isLoading()) {
<p>Loading…</p>
}
`
})
export class UserComponent {
readonly userId = signal(1);
readonly user = httpResource(() => `/api/users/${this.userId()}`);
}For more complex requests, return an object containing the URL and request options. Build any property that should respond to changing state from signals. The request function can return undefined when no request should be made; for example, while a required search term is empty. See Angular’s httpResource guide for the supported request shape and examples.
Represent loading, errors, and values safely
Use the resource’s signals to branch the UI. In particular, check hasValue() before calling value(): Angular documents that reading the value in an error state throws at runtime. The guard also distinguishes a loaded value from a resource that has not produced one.
hasValue(): whether the resource currently has a value.value(): the current value; read it only after checkinghasValue().error(): the current error, if the request failed.isLoading(): whether a request is in progress.
The resource reference also provides status, snapshot, reload, and writable-value operations. HTTP-specific signals include response headers, status code, and progress; consult the HttpResourceRef API for the current reference members.
Rank #3
Choose a response type and validate it
The default httpResource response is JSON. The TypeScript type alone does not check that a server response has the expected structure at runtime. Use the parse option to validate or transform the response; the parser’s return type determines the resulting TypeScript type, but the parser must perform the actual runtime checks.
For non-JSON responses, use the matching constructor:
httpResource.text(...)for text.httpResource.blob(...)for aBlob.httpResource.arrayBuffer(...)for anArrayBuffer.
A runtime schema library such as Zod can be used inside parse. Angular documents the resource options, including parsing.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesTrack download progress
Set reportProgress: true in the request options to enable download progress, then read the resource’s progress() signal. For httpResource, this option enables download tracking; do not treat it as upload-progress reporting. Angular’s guide describes the progress behavior.
Configure HTTP and test requests
Configure Angular’s HTTP client with provideHttpClient(...) when the application needs HTTP features such as interceptors or XSRF options. Because httpResource uses HttpClient, it remains within that HTTP stack.
For tests, use provideHttpClientTesting() and HttpTestingController. Trigger the resource effect using the test APIs, match and flush the request, then wait for application stability before asserting the signal value. Follow the current Angular guide for the exact testing setup and APIs for your Angular version.
When to use httpResource, HttpClient, or resource
| Option | Best fit | Important distinction |
|---|---|---|
httpResource |
HTTP reads that benefit from signal-based state and automatic updates when request dependencies change. | Eager request; uses the HttpClient stack and exposes resource state as signals. |
HttpClient directly |
Mutations such as POST or PUT, or cases where the Observable request API is the better fit. | Requests are Observables and are sent when subscribed; use this API for operations Angular advises against doing with httpResource. |
Core resource |
Asynchronous work represented by a loader when HttpClient-specific integration is not needed. | A general resource API, not an HTTP client; it does not provide HttpClient interceptors or HTTP testing integration. |
Angular describes core resources as suitable for read operations and cancellation when new parameters arrive. For HTTP requests that should use Angular’s HTTP features, httpResource is the more direct fit. See the HttpClient guide and resource guide for the alternatives.
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.
