Episode 23/24: Angular 16, RFCs for Deferred Loading and built-in Control-Flow
Angular 16.1 added support for using the native fetch method in the HttpClient and introduces a transform function for `@Input` decorator. Two new RFCs propose an alternative to the control-flow directives and deferred component loading.
Angular 16.1
`fetch` in `HttpClient`
Angular 16.1 has been released, bringing two useful new features to the framework.
The first feature allows developers to use the native fetch method instead of the older xhr object in the `HttpClient`. To enable this, simply use the `withFetch` function in the `provideHttpClient` configuration. This feature remains backward compatible, with the `HttpClient` continuing to return Observables, and all interceptors functioning as expected.
This enhancement is particularly beneficial for server-side rendering, as the XmlHttpRequest (xhr) is specific to browsers and not available on the backend. By leveraging the native fetch method, also available in Node.js, developers can avoid additional libraries.
Matthieu Riegler, a community contributor, deserves recognition for implementing this feature. Since late 2022, Matthieu has made over 200 commits to the Angular repository.
`transform` in `@Input`
The second feature introduced in Angular 16.1 is the addition of a transform function for the @Input decorator. This function enables mapping from one data type to another, making it particularly useful for “Router Parameters as Component Inputs”, introduced in Angular 16.
For example, when receiving an ID parameter as a string, developers can use the transform function to map it to a number before assigning it to a property.
New RFCs
We have also received two new RFCs.
Built-In Control Flow
The first RFC proposes an alternative to the existing control-flow directives such as `*ngIf` or `*ngFor`. Rather than introducing new directives, it is a new syntax built directly into the template.
This eliminates the need for separate directive imports. This change is necessary to align with Signals.
The new template syntax is inspired by the Svelte framework.
Deferred Loading
The second RFC focuses on deferred loading of components and introduces a new template syntax for specifying conditions when a component should be loaded, such as visibility in the viewport.
It also allows developers to define the rendering behaviour for loading or error states. This feature aligns with similar functionality found in the React framework.
