Exploring Angular httpResource: a new approach to async data fetching

In the past two years, Angular has embarked on a journey to revolutionize its reactive model, introducing signals as core primitives for synchronous reactivity within the framework. More recently, this journey has expanded into the realm of asynchronous reactivity with the new Resource API. With the latest updates, Angular has gone even further by introducing a specialized resource type: httpResource. This addition extends the Resource API, offering a more efficient way to handle HTTP requests. In this article, I’ll explore how httpResource works and how to use it in real-world scenarios, starting with a quick refresh of the Resource API. The Resource API The Angular Resource API is designed to simplify asynchronous resource loading by leveraging signals. It offers a streamlined approach to managing data requests, tracking loading states, and automatically refreshing data when the signals on which the resource depends change. How to use a Resource? To use a resource, you can use the resource() function, where you define: A request function that returns the parameters for the async request; A loader function that fetches data based on the request parameters. Here’s a simplified example: import { resource, signal } from '@angular/core'; const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/'; private id = signal(1); private myResource = resource({ request: () => ({ id: this.id() }), loader: ({ request }) => fetch(RESOURCE_URL + request.id), }); A resource automatically tracks the request parameters and, whenever they are updated, fetches new data using the loader function. Most importantly, it monitors the status of the data-fetching operation, tracking the resource’s current value, status, and any errors. For more details about the Resource API, including its lifecycle, error handling, and how to consume a resource, check out my previous article: Angular resource() and rxResource() APIs: what you need to know Davide Passafaro ・ Jan 1 #angular #frontend #webdev #javascript Now that we’ve had a good refresh on the Resource API, let’s dive into the new httpResource.

Mar 20, 2025 - 12:27

Exploring Angular httpResource: a new approach to async data fetching

In the past two years, Angular has embarked on a journey to revolutionize its reactive model, introducing signals as core primitives for synchronous reactivity within the framework. More recently, this journey has expanded into the realm of asynchronous reactivity with the new Resource API.

With the latest updates, Angular has gone even further by introducing a specialized resource type: httpResource. This addition extends the Resource API, offering a more efficient way to handle HTTP requests.

In this article, I’ll explore how httpResource works and how to use it in real-world scenarios, starting with a quick refresh of the Resource API.

The Resource API

The Angular Resource API is designed to simplify asynchronous resource loading by leveraging signals.

It offers a streamlined approach to managing data requests, tracking loading states, and automatically refreshing data when the signals on which the resource depends change.

How to use a Resource?

To use a resource, you can use the resource() function, where you define:

A request function that returns the parameters for the async request;
A loader function that fetches data based on the request parameters.

Here’s a simplified example:

import { resource, signal } from '@angular/core';

const RESOURCE_URL = 'https://jsonplaceholder.typicode.com/todos/';

private id = signal(1);

private myResource = resource({
    request: () => ({ id: this.id() }),
    loader: ({ request }) => fetch(RESOURCE_URL + request.id),
});

A resource automatically tracks the request parameters and, whenever they are updated, fetches new data using the loader function.

Most importantly, it monitors the status of the data-fetching operation, tracking the resource’s current value, status, and any errors.

For more details about the Resource API, including its lifecycle, error handling, and how to consume a resource, check out my previous article:

Angular resource() and rxResource() APIs: what you need to know

Davide Passafaro ・ Jan 1

#angular #frontend #webdev #javascript

Now that we’ve had a good refresh on the Resource API, let’s dive into the new httpResource.