Month: November 2024

Angular 19 is now available with many different updates. A video recap (23 minutes long) of all these features is available on YouTube.

There is a lot to unpack, so this week, my focus is on all signal-related updates.

First, signal-based input, output, and view query functions are all stable APIs as of v19, which means you can use all of them safely. Here is the complete list of such stable features:

input(), output(), model(), viewChild(), viewChildren(), contentChild(), contentChildren(), takeUntilDestroyed(), outputFromObservable(), and outputToObservable() 

Yes, that’s a lot!

Second, to help you migrate your old @Input() and @ViewChild()to their signal-based equivalents, new Angular CLI migration commands are available:

ng generate @angular/core:signal-input-migration
ng generate @angular/core:signal-queries-migration
ng generate @angular/core:output-migration

Initial feedback from these automated migrations is very positive.

The third update, a new type of Signal (in developer preview) called linkedSignal. This new function also creates a computed signal that can be written manually. In other words, a computed signal is read-only, whereas a linkedSignal is writable while preserving automatic update and computation features of a computed signal.

The final and most significant update is the addition of a resource API to Angular. This is a big one for several reasons: It enables total signal-based reactivity while using Promises or RxJs to fetch updates.

Here is a code example:

sortOrder = signal<'asc' | 'desc'>('asc');
usersResource = rxResource({
request: () => ({ sort: this.sortOrder() }),
loader: ({ request }) => this.http.get('/users', { params: { sort: request.sort } })
});

The above code will send a request to /users with the proper sort parameter every time the sortOrder() signal value changes. The result is an object with lots of information about the resource:

The approach is similar to ngx-signalify or TanStack Query, and it looks promising. Now, resource is in an experimental state, which means “do not use it in production yet” (the API will likely change), but you can learn more about it here. Because there’s so much more to it, I’ll write a dedicated post and/or do a long-form video workshop on that topic.

And that’s it for the four main updates regarding Signals in v19. I could add a fifth one with the effect() function still in developer preview but now allows writing other signals by default (no more need to add the option to perform such writes).