Angular 19.2 - What's new?

Angular 19.2 introduces a range of improvements to enhance performance and usability when working with the framework. This version includes new features such as better resource management, support for template literals, and compatibility with TypeScript 5.8. This article will explore the most significant changes and new features worth knowing.

Support TypeScript 5.8

Angular 19.2 will be fully compatible with the latest version of TypeScript 5.8, whose stable release is scheduled for February 25, 2025—almost simultaneously.

Introducing experimental httpResource

Angular is experimenting with a new feature called httpResource, which introduces a more declarative and reactive approach to managing HTTP requests. Unlike the traditional HttpClient approach, where each request requires a manual call, httpResource automatically updates data in response to signal changes. Let’s take a look at an example.

Until now, if we wanted to fetch data from an API in Angular, we would use the HttpClient service like this:

@Injectable({ providedIn: 'root' })
export class UserService {
  constructor(private http: HttpClient) {}

  getUser(id: number): Observable<User> {
    return this.http.get<User>(`https://api.example.com/users/${id}`);
  }
}

The new httpResource feature allows the creation of an HTTP resource (HttpResource) that reacts to signal changes.

Instead of manually calling http.get(…) every time the user ID changes, we can create an httpResource that automatically updates data when, for example, the user ID changes.

const userResource = httpResource<User>({
  method: 'GET',
  url: () => `https://api.example.com/users/${userId()}`, // URL zmienia się dynamicznie
});

This approach simplifies code, improves state management, and eliminates the need for manual data refreshing. Although the feature is still experimental, it promises significant improvements in handling asynchronous operations in Angular applications.

Support untagged template literals in expressions

Angular 19.2 introduces an improvement related to template literals, previously unsupported in HTML templates. This enhancement simplifies how we combine variables with text in templates.

In earlier versions of Angular, if we wanted to include text with an embedded variable in a template, we often had to use the traditional string concatenation operator (+). For example:

{{ 'Ala has ' + count + ' cats' }}

{{ cartCount() === 0 ? 'Your cart is empty.' : 'You have ' + cartCount() + ' items in your cart.' }}

The variable count was concatenated with text using the + operator in this case. While functional, this approach introduced some rigidity and required longer, less elegant expressions in the template.

Starting from version 19.2, Angular allows template literals – a modern string interpolation method that is more readable and concise. We can now use the following syntax:

{{ `Ala has ${count} cats` }}

{{ cartCount() === 0 ? 'Your cart is empty.' : `You have ${cartCount()} items in your cart.` }}

Instead of using the + operator, we insert variables directly into the string using ${}. This approach is more elegant, improves readability, and makes templates more manageable to maintain, especially for longer or more complex text strings.

Support streaming resources

In the new version of Angular, support has been added to create resources that handle streaming data. Instead of the traditional „loader” (a function that loads data), a resource can now use the stream option, which returns a Promise with a Signal type.

Additionally, the rxResource() function has been updated to leverage this new functionality, allowing it to handle multiple responses from various sources, such as Observables.

Support default value in resource()

When using the resource() function, before the resource is fully loaded, its value remains in an unknown state. By default, in such cases, the function returns undefined. This means that when accessing the resource’s value, .value() may also be undefined and require special handling in the code. These situations can complicate state management, as developers must account for undefined in their types.

With the introduction of the defaultValue option in resource() and rxResource(), it is now possible to specify a default value that will be used when the resource has not yet loaded. As a result, .value() will no longer return undefined, allowing for a clear, predefined value to be used in such cases.

Old approach:

const resourceValue = resource().value(); // May be undefined

New approach:

const resourceValue = resource({ defaultValue: 'default' }).value(); // Returns 'default'

Detect missing structural directive imports

In previous versions of Angular, if you forgot to import a structural directive (e.g., ngIf, ngFor from CommonModule), the compiler would generate a warning. However, for custom structural directives defined by the user, a missing import would not trigger any warning—the application simply wouldn’t work, but no error message was displayed.

This was frustrating for developers migrating to standalone components, as it made missing imports challenging to detect.

Starting from Angular 19.2, the compiler will warn about missing imports for custom structural directives.

Support type set in form validators

Validators such as Validators.required, Validators.minLength, and Validators.maxLength are typically used to validate the length of arrays or strings. However, when applying these validators to Set objects (which store unique elements), they did not work correctly. This was because Set uses the size property instead of length.

With this update, the Validators.required, Validators.minLength, and Validators.maxLength validators now work correctly with Set objects. These validators now consider the size property of Set to be the equivalent of length.

const set = new Set([1, 2, 3]);
const control = new FormControl(set, [Validators.minLength(4)]); // Works correctly

Summary

Angular 19.2 is another important release of the popular framework, introducing a range of improvements and new features aimed at enhancing performance, simplifying developers’ daily work, and adapting to the latest technologies.

This version focuses on refining resource management, handling HTTP requests, form validators, and interactions with templates while providing full compatibility with TypeScript 5.8.

Thanks to these changes, building web applications becomes even more straightforward, more efficient, and more enjoyable.

angular.love