This content originally appeared on Angular Blog - Medium and was authored by Angular
And we’re back with Angular’s latest minor release, version 19.2, bringing new APIs and experimental features to empower developers on their next great app.
Expanding reactivity beyond synchronous
In Angular v19 we released the experimental resource API, continuing our reactivity story to a new chapter — asynchronous reactivity.
With this release, we’re thrilled to introduce two significant updates: asynchronous reactivity with the new httpResource and resource streaming with rxResource APIs.
Developers have been able to use signals for synchronous state in Angular since their introduction in Angular v16. At the same time developers have been curious as to how they can leverage the power, readability and maintainability of signals for asynchronous dependencies. The resource API makes it possible to interact with asynchronous data sources while leveraging the developer experience and ergonomics of signals. The resource API is a foundational building block for incorporating asynchronous actions like data fetching in Angular.
Here’s an example of how you can use resourcein your application:
/*
component.ts
*/
readonly id = signal(1);
readonly todoResource = resource({
request: ()=> ({id: this.id()}),
loader: async ({request}) => (await fetch(
`https://jsonplaceholder.typicode.com/todos/${request.id}`)).json(),
});
/*
component.html
*/
<p>{{ todoResource.value() }}</p>
If the id value updates, the loader reactively triggers the defined asynchronous operation again. Then, in the template for the component, the current value can be accessed via .value().
While this API is helpful, one might naturally conclude that they should use this API to fetch data asynchronously. Thanks to Mattieu Rigler for his helpful contributions, we now have another great new API for you to try out: httpResource
Used for fetching data, the experimental httpResource API creates a low friction reactive way to fetch data over HTTP. httpResource participates in Angular’s reactivity system with signals. Here’s an example of using it in action:
// returns a signal
currentUserId = getCurrentUserId();
// A reactive function as argument
user = httpResource(() => `/api/user/${currentUserId()}`);
Here, httpResource reacts to changes in the signal currentUserId. When currentUserId updates, httpResource triggers a new asynchronous request. Because the API leverages HttpClientit gives you access to features such as interceptors.
While we’re on the topic of asynchronous requests there’s one more update that we think you’ll really enjoy. We’ve added support for streaming multiple responses using the rxResource API. Check out this example:
/*
component.ts
Using a BehaviorSubject and an setInterval to create a stream of values
that generates a new value every 1000ms
*/
readonly subject = new BehaviorSubject<number>(1);
readonly intervalId = setInterval(() => {
this.subject.next(this.subject.value + 1);
}, 1000);
/* rxResource will stream values as they arrive */
readonly resource = rxResource({
loader: () => this.subject,
});
/*
component.html
Display the latest values that have been returned
*/
<section>
<p>{{ resource.value() }}</p>
</section>
This could be helpful in scenarios where you are connecting to an endpoint that returns multiple values.
These new APIs are still under development and what’s great is that there’s a new RFC (request for comments) for the resource API available for you to share your thoughts and help us shape this new API.
Better template ergonomics and more
The Angular template authoring experience just keeps improving. Angular templates now support untagged template literal expressions, making string concatenation and escaping single or double quote strings easier.
For example, it’s less cumbersome to dynamically interpolate a value from your class into your template. Check out this example:
<div [class]="`layout col-${colWidth}`"></div>This improved experience makes interpolating values even smoother.
This isn’t the only update we’re launching in Angular v19.2 — there are new migrations such as being able to migrate to convert to self closing tags (thanks eneajaho!), supporting the Set type in forms, adding skip hydration diagnostic and so much more. If you’d like to see even more updates from Angular v19.2, be sure to check out the change log on GitHub.
Get the latest and greatest from Angular today
Angular v19.2 is ready for your applications today so go ahead, update and go build great apps.
New to Angular? Check out angular.dev/tutorials to start building with Angular today.
Author Mark (Techson) Thompson
Angular 19.2 Is Now Available was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Angular Blog - Medium and was authored by Angular
Angular | Sciencx (2025-03-05T16:55:07+00:00) Angular 19.2 Is Now Available. Retrieved from https://www.scien.cx/2025/03/05/angular-19-2-is-now-available/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.