# Introduction
httpResource is an experimental API introduced in Angular v. 19.2.x and provides a new strategy for managing server communication in Angular applications.In a previous lesson we have already discussed about the new features introduced by
resource and rxResource and I invite you to read it in case you haven’t.# rxResource vs httpResource: simple GET
Now let’s start with an example that compares rxResource and httpResource to do the following:
1
calls a REST endpoint that returns an array of users
2
Displays a list of users using
@for3
Handles loading and errors
rxResource greatly simplifies the management of asynchronous operations, providing convenient properties to manage also errors and loading status<Practice>
Click or in the editor to practice
src/app.component.ts
Simulate errors
Try to change the url so that it is not valid to display the message "Server Error"
As you can see,
httpResource does not require the import of inject and the use of httpClient and the code is further simplified than previous example:src/app.component.ts
# httpResource: errors
And if we wanted to display a different error message based on its
status?When we try to access
users.error().status we will receive a compilation error since error() is typed as unknown.So a possible solution is to use
$any directly in the template as shown in the snippet below.Obviously we lose the advantages of the type system so in the next snippet we will use an alternative way
src/app.component.ts
Instead of using
$any we can create a computed signal based on error() and cast it to HttpErrorResponse:src/app.component.ts
# Usage with Signals
In this example we see how to call a REST API when changing the value of a signal:
1
Let’s initialize an
id property using a signal2
A "Next" button increases this value from 1 to 10
3
The asynchronous call is made with the new ID and data is displayed
In this example it becomes even more evident the advantage of using
httpResource whose code is much leaner than rxResourcesrc/app.component.ts
src/app.component.ts
More Examples coming soon...
We have prepared 10 snippets with several examples that integrate httpResource in different scenarios, combining Signals with RxJS,
ngModel, Reactive Forms and much more.We will publish them in the next few days, so stay tuned, subscribe the newsletter and follow us on LinkedIn Page
Don't forget to create an account in order to use the interactive playground, monitor your progress, use bookmarks and more...
