Signals + HTTP = httpResource [Tutorial]

Angular 19.2 brought an experimental new API called httpResource. I published a tutorial about rxResource a few months ago, and httpResource is a new, more polished layer on top of that.

Let’s start with the basics. Signals are slowly making their way across all APIs of the Angular framework, which begs the question: How do we use the Angular HttpClient with Signals, since the HttpClient returns an Observable?

A simple answer would be to use the toSignal function:

signal = toSignal(this.http.get("http://mydata.com"));

While the above works, it doesn’t help us know:

• Is the data loaded / loading?
• Did we get an error while making that request?

The resource API fixes that because it returns a bunch of Signals and methods that answer all these questions:

We can check resource.hasValue() or resource.isLoading() to get our answers.

Creating a resource for HTTP requests is as easy as it gets:

resource = httpResource('https://dummyjson.com/users');

Of course, we can add type information using TypeScript to specify the kind of data we expect from the server:

resource = httpResource('https://dummyjson.com/users');

Now, if I want to display the data coming from our server through that request, all I need to do is:

@for(user of resource.value(); track user.id) {

{{user.firstName}} {{user.lastName}} - {{user.age}} years old

}

And if I want to display a loader/spinner while data is being loaded, I can add:

@if (resource.isLoading()) {

}

You can see this entire example on Stackblitz here.

Yes, and the beauty of it is that it’s all signal-based. For instance, if we need to support pagination, and that pagination info is used as URL query params like so:

// Get 10 users skipping the first 20
https://dummyjson.com/users?limit=10&skip=20

We can change our resource to accommodate such dynamic URL parameters. The key is to pass a function as a parameter instead of just the URL:

resource = httpResource(() => ({
url: `https://json.com/users?limit=${this.pageSize()}&skip=${this.pageSize() * this.page()}`
})
);

In the above example, pageSize() and page() are both signals that have their values bound to a form so the user can change these values by clicking on buttons or interacting with a dropdown:

The HTML template code for that feature is pretty straightforward:

Page size

5
10
20

-
< Previous
Page {{page() + 1}} of {{totalPages()}}
Next >

The magic of all this is that when the user clicks on the next page button, all we do is update a Signal value:

nextPage() {
this.page.update((page) => page + 1);
}

And because page() is a dependency of our httpResource, every change in that value triggers a new HTTP request to fetch updated data, just like with a computed signal.

You can see my pagination example in action here on Stackblitz.

You can do that. Of course, it works with all kinds of HTTP requests:

resource = httpResource(() => ({
url: `https://json.com/users?limit=${this.pageSize()}&skip=${this.pageSize() * this.page()}`,
method: "POST"
})
);

Just use Signals! Any change in the values of any of these signals would trigger a new request:

resource = httpResource(() => ({
url: "api/schools/collection/filter",
method: "POST",
body: {pageSize: this.pageSize(), page: this.page()}
}));

You can apply the same idea to headers, params, URL, etc. Here are all the available options on the HttpResourceRequest object, which is the one passed to the httpResource function:

Note that you can also initiate a manual reload of a resource, and that resources automatically abort the last HTTP request if your code triggers a new request before the previous one completes.

The httpResource API is still experimental, but it will most likely replace all our usages of HttpClient in the near future, which is why I’m excited to share this now!

My name is Alain Chautard. I am a Google Developer Expert in Angular, Microsoft MVP, and a consultant and trainer at Angular Training, where I help web development teams learn and become proficient with Angular / React / JavaScript.

If you need any help learning web technologies, feel free to get in touch!

If you enjoyed this article, please clap for it or share it. Your help is always appreciated. You can also subscribe to my articles and Weekly Angular Newsletter to receive helpful weekly tips and updates about Angular.