Angular continues to evolve, making development smoother and more efficient. The latest minor release, Angular 19.2, introduces exciting updates, including asynchronous reactivity, resource streaming, and improved template ergonomics. Let’s dive into these new features with beginner-friendly examples.

Expanding Reactivity Beyond Synchronous Operations

Angular 19.2 builds on the reactivity introduced in Angular v16 (signals), enabling developers to handle asynchronous data sources seamlessly using the new Resource API. This includes:

1. httpResource API: Reactive HTTP data fetching.
2. rxResource API: Streaming multiple asynchronous responses.

Example 1: Using resource for Asynchronous Reactivity

The resource API allows us to fetch asynchronous data reactively, leveraging signals for reactivity.

/* component.ts */
import { signal, resource } from '@angular/core';

readonly id = signal(1); // Reactive signal for the ID
readonly todoResource = resource({
  request: () => ({ id: this.id() }), // Reactive request
  loader: async ({ request }) =>
    (await fetch(`https://jsonplaceholder.typicode.com/todos/${request.id}`)).json(),
});

/* component.html */
<p>{{ todoResource.value() }}</p>

How It Works:

• When the id signal updates, the loader function triggers an asynchronous HTTP request.
• The result is displayed in the template using .value().

Example 2: Fetching Data with httpResource

/* component.ts */
import { httpResource } from '@angular/core';

readonly currentUserId = signal(5); // Signal for user ID
readonly user = httpResource(() => `/api/user/${currentUserId()}`); // Reactive HTTP request

/* component.html */
<p>{{ user.value() }}</p>

How It Works:

• The httpResource reacts to changes in the currentUserId signal.
• When the signal updates, a new HTTP request is triggered automatically.

Example 3: Streaming Responses with rxResource

The rxResource API enables streaming multiple asynchronous responses, useful for real-time data updates.

/* component.ts */
import { rxResource } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

readonly subject = new BehaviorSubject<number>(1);
readonly intervalId = setInterval(() => {
  this.subject.next(this.subject.value + 1);
}, 1000);

readonly resource = rxResource({
  loader: () => this.subject,
});

/* component.html */
<section>
  <p>{{ resource.value() }}</p>
</section>

How It Works:

• The rxResource streams values from a BehaviorSubject.
• The template displays updated values as they arrive.

Better Template Ergonomics with Template Literals

Angular 19.2 introduces template literals in templates, simplifying dynamic string interpolation for attributes like class, style, or attr.

Example 4: Dynamic Class Names with Template Literals

/* component.ts */
readonly colWidth = 4;

/* component.html */
<div [class]="`layout col-${colWidth}`"></div>

Before Template Literals: Using [ngClass] or multiple [class.x] bindings was verbose.

After Template Literals: You can write JavaScript-like string interpolation directly in templates, making the code cleaner and easier to read.

Example 5: Token-Based Theming with Template Literals

/* component.ts */
export const tokens = {
  colors: { success: 'green', error: 'red' },
  spacings: { sm: 4, md: 8 },
};

readonly tone = signal('success');
readonly size = signal('sm');

/* component.html */
<div 
  [class]="`bg-${tokens.colors[tone()]} text-${tokens.spacings[size()]}`"
  [style]="`padding: ${tokens.spacings[size()]}px`">
  Token-themed badge
</div>

Benefits:

• Cleaner syntax for theming and design tokens.
• Direct integration with reactive signals.

Angular 19.2 is ready for your applications! Update your project and explore these new features to build reactive, efficient, and elegant apps.

Happy coding! ?