# 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
# Multiple Http Requests
In this example we discuss a possible strategy to make parallel and sequential calls.
Suppose we have the id of a post, in our case
postId which is equal to 1.The post id could be retrieved from the browser’s url or passed to a comment via input properties.
So we can do this sequence of operations:
GETpost info
The first
httpResource has postId() as dependency so it will be invoked automatically when the component is mount or every time it changes:GETuser info and all the comments of the post
The second and third
httpResource depend on the previous one and when post.value() changes they will be automatically invoked.
In fact we retrieve the userId from the previous call and we use it to compose new URLs.Here the result :
src/app.component.ts
This example is essentially identical to the previous one except that we increment the
postId to load new data when a button is clickedWe increase the value of
postId by 5 since the userId changes every 10 posts.
src/app.component.ts
# defaultValue in case of errors
src/app.component.ts
# Schema validators (with Zod)
The new #angular
httpResource API allows to directly integrate Schema Validations using libraries such as Zodtext or Valibottext .Imagine that your endpoint at some point no longer returns the
name property but has changed to title.
Thanks to the definition of a schema you can be immediately alerted and generate an exception.- create your scheme definition:
- use the
parseproperty ofhttpResourcepassing the schema:
That's all.
Super easy and useful.
src/app.component.ts
# Forms, ngModel & httpResource
In this example we see how to use
httpResource with Template Driven Forms:
- The
inputTextproperty is a ModelSignals , so it is writeable. - We use the
ngModeldirective with directional binding to theinputTextsignal. - So, when we write in the input field, it also updates the signal value
- Finally
httpResourceautomatically invoke the/usersendpoint whenever the signal changes
src/app.component.ts
Abort vs Debounce
If we type a new character in the input field and there is a pending call that still have to be completed, it will be canceled.
However, if the API responds very quickly, the result is that for every character we type in the input field we will make a call to the REST service.
# RxJS, Reactive Forms & Debounce
In previous paragraph we have seen how an
httpResource can depend on signals.
What if we wanted to use it with the Reactive Forms that currently (v.19) only expose Observables?We can easily create a signal from an Observable, using
toSignal:src/app.component.ts
In this way, we could have an
httpResource that depends on query(), which will be updated whenever the user writes into a reactive input or form:src/app.component.ts
Since the
query signal is based on an Observable, we can then exploit a whole series of RxJS operators very useful for forms:src/app.component.ts
The advantage of using a debouce strategy is to avoid that an
httpResource based on this signal will be invoked at each typing but only when the user finishes typing.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...
