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 resources bring asynchronous reads into signal-based code by exposing request data and state as signals. Choose resource() for a custom asynchronous loader, httpResource() for reactive reads through Angular’s configured HTTP stack, rxResource() when the source is an Observable, and Router resources when data belongs to matched routes. For writes such as POST or PUT, use HttpClient directly: resources can cancel in-flight work when inputs change.
Choose the resource API that matches the data source
Start with three questions: Is this a read or a mutation? Where does the data come from? Should route activation wait for the data, or should the component render while it loads?
| Need | Use | Why |
|---|---|---|
| Custom asynchronous read, often a Promise or another loader | resource() |
You control how parameters become a result, and can use a one-result loader or a continuing stream. Angular’s resource guide. |
| HTTP read using Angular’s configured HTTP stack | httpResource() |
It uses HttpClient, including its interceptors and testing facilities, and reacts to request changes. Angular’s httpResource guide. |
| Existing Observable-based source | rxResource() |
Its loader maps the request to an RxJS Observable. Angular’s rxResource API reference. |
| Data associated with matched routes | Router resources configuration |
Route resources can load concurrently; choose blocking or non-blocking behavior according to the desired activation and loading UI. Angular’s Router resource guide. |
| Write or mutation, such as POST or PUT | Direct HttpClient API |
Angular advises against using httpResource() for mutations, because cancellation could abort an operation that should complete. |
How resource() works
A resource connects a reactive params computation to a loader. When signals read by params change, Angular reevaluates the request and aborts an in-progress load. The loader receives the computed parameters, a previous status object, and an abortSignal. Pass that signal to cancellation-aware work such as fetch so an obsolete request can stop rather than continue unnecessarily. The API and its behavior are documented in Angular’s resource guide.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesIf params returns undefined, Angular does not run the loader and the resource is idle. This is useful when required inputs are not ready yet; it avoids issuing a request with incomplete parameters.
#1 Best Overall
Use a loader for one result, or a stream for continuing updates
Use the loader when a request resolves to one result. Use stream when a source can produce new values over time, such as a WebSocket, Server-Sent Events connection, or Firestore onSnapshot listener. A stream-backed resource can update its value more than once; it is not just a different way to return one Promise result.
Read resource state safely
Resources expose signals including status, value, error, isLoading, snapshot, and hasValue. Reading value while the resource is in an error state can throw. In templates and code, check hasValue() before accessing the value, and handle loading and error states through the corresponding signals. This lets the UI distinguish an unresolved request from a failed one instead of treating both as missing data.
When httpResource() is the better fit
httpResource() is an eager, reactive wrapper over Angular’s HttpClient. Unlike a plain HttpClient Observable, which starts when subscribed, an HTTP resource starts its request eagerly. When the reactive request changes, Angular sends a new request and cancels a pending one. It also uses the HttpClient stack, so configured interceptors and HTTP testing tools remain relevant. Configure provideHttpClient(...) when the application needs HTTP features such as interceptors or XSRF options. See Angular’s HTTP resource guide.
Response formats and parsing
JSON is the default response format. For other response bodies, use httpResource.text(), httpResource.blob(), or httpResource.arrayBuffer(). A parse option can validate or transform the response; its return type determines the resource’s value type. Angular’s guide demonstrates schema validation integration without requiring one particular validation library.
Rank #3
Download progress
Set reportProgress: true to request download progress and read the latest value through the resource’s progress signal. In this resource API, that option enables download progress; it is not the same as the newer separate upload and download progress options available through HttpClient.
Keep mutations on HttpClient
Use direct HttpClient methods for operations such as POST and PUT. A resource is designed around reactive reads and cancellation when inputs change; that behavior can prematurely abort a mutation. Angular states: “Avoid using httpResource for mutations like POST or PUT.”
Use Router resources when data belongs to a route
Router resources attach loading to matched routes and can load data for those routes concurrently. By default, they are blocking: the router waits for the resource, binds the resolved value to the component input, and cancels navigation if loading fails. This is appropriate when the destination should not activate without its data.
Choose blocking or non-blocking activation
Wrap a Router resource with nonBlocking() when the component should activate immediately and render its own loading or error state. The component can then use the full resource state rather than waiting for a resolved value. A resource can also refresh through reload() or when a tracked route parameter changes, without requiring navigation again. See Angular’s Router resource guide.
Track only the route fields the loader needs
Read a specific route parameter rather than the whole parameters object when possible. The Router creates a new params object on each navigation, so tracking the entire object can trigger a refetch even when the relevant parameter did not change. Narrow dependencies avoid that unnecessary work.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Account for server rendering and hydration
During server rendering, a resource loader runs to produce the initial HTML. Without transfer-state reuse, the browser normally runs it again during hydration. Providing a unique id lets Angular place the resolved result in TransferState so the client can initialize from it. The ID must be unique in the application and identical on the server and client. Do not use this approach for user-specific data if rendered HTML might be cached or shared: the transferred value is serialized into that HTML. Details are in Angular’s resource guide.
Check the Angular version before adopting the APIs
Angular’s API references label resource, httpResource, Resource, and rxResource stable since v22.0. This is version-sensitive: check the installed Angular version and its available API surface before planning adoption or migration in an application on an earlier major version. References: resource, httpResource, Resource, and rxResource.
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.
