With Angular 16.1, the native fetch API can now be leveraged within HttpClient, and the @Input decorator gains a transform function. Additionally, two RFCs suggest replacing the existing control-flow directives with a new approach, alongside deferred component loading.
Angular 16.1
fetch in HttpClient
Angular 16.1 is out, adding a couple of handy improvements to the framework.
With one of these additions, developers can now swap the legacy xhr object for the native fetch method when working with HttpClient. Activating this mode is straightforward: call the withFetch function inside the provideHttpClient setup. The change is fully backward compatible, so HttpClient still returns Observables and all interceptors operate without any alterations.
This update holds special value for server-side rendering, since XmlHttpRequest (xhr) is tied to browsers and doesn't exist in backend environments. Switching to the native fetch approach—which Node.js also supports—lets developers skip extra dependencies.
This work was carried out by community member Matthieu Riegler, whose contributions deserve applause. Matthieu has been active in the Angular repo since the close of 2022, racking up more than 200 commits.
feat(http): Introduction of the `fetch` Backend for the `HttpClient`
#50247
This commit introduces a new HttpBackend implentation which makes requests using the fetch API
This feature is a developer preview and is opt-in.
It is enabled by setting the providers with provideHttpClient(withFetch()).
Currently the report progress is not implemented and using reportProgress: true will throw an error.
NB: The fetch API is experimental on Node but available without flags from Node 18 onwards.
NB2: The tests provided in the PR won't run, as fetch is not available on the node version provided by the bazel workspace (16.14)
Edit: pinning a answer I gave bellow on the purpose of this new backend:
Xhr is not supported natively on NodeJS an requires a polyfill. Currently Angular uses xhr2 for this. However, the polyfill is side-effectful and doesn't work in non-Node.js environments (such as Edge Workers). There are also others issues like https://github.com/angular/angular/issues/46930 (its doesn't support Gzip).
PR Type
What kind of change does this PR introduce?
- [x] Feature
Does this PR introduce a breaking change?
- [x] No
transform in @Input
Angular 16.1 introduced a new capability for the @Input decorator: a transform function. With this, developers can convert an incoming value into another type, which proves handy for the "Router Parameters as Component Inputs" feature that arrived in Angular 16.
Take an ID parameter that comes in as a string—the transform function can be applied to cast it to a numeric value before it gets bound to a property.
blog.ninja-squad.com
New RFCs
Two additional RFCs have just landed.
Built-In Control Flow
The initial RFC puts forward a replacement for existing directives like *ngIf and *ngFor, but not through new directives—instead, via a syntax directly wired into the template.
This approach removes the requirement to import separate directives, a shift that becomes essential for compatibility with Signals.
The template design borrows inspiration from Svelte's syntax.
Deferred Loading
The second RFC looks at deferred loading for components, adding new template markup to declare when a component should load—for example, when it becomes visible within the viewport.
Moreover, developers gain the ability to configure how rendering behaves during loading or when errors occur, paralleling capabilities seen in React.