{"id":2228,"date":"2024-11-20T12:29:50","date_gmt":"2024-11-20T20:29:50","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=2228"},"modified":"2024-11-20T12:29:51","modified_gmt":"2024-11-20T20:29:51","slug":"whats-new-with-signals-in-angular-19","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/whats-new-with-signals-in-angular-19\/","title":{"rendered":"What’s new with Signals in Angular 19?"},"content":{"rendered":"\n

Angular 19 is now available with many different updates. A video recap<\/a> (23 minutes long) of all these features is available on YouTube.<\/p>\n\n\n\n

There is a lot to unpack, so this week, my focus is on all signal-related updates.<\/p>\n\n\n\n

First, signal-based input<\/a>, output, and view query<\/a> 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:<\/p>\n\n\n\n

input()<\/a><\/code>,\u00a0output()<\/code>,\u00a0model()<\/a><\/code>,\u00a0viewChild()<\/code>,\u00a0viewChildren()<\/code>,\u00a0contentChild<\/code>(),\u00a0contentChildren()<\/code>,\u00a0takeUntilDestroyed()<\/a><\/code>,\u00a0outputFromObservable()<\/code>, and\u00a0outputToObservable()<\/code>\u00a0<\/p>\n\n\n\n

Yes, that’s a lot!<\/p>\n\n\n\n

Second<\/strong>, to help you migrate your old @Input()<\/code> and @ViewChild()<\/code>to their signal-based equivalents, new Angular CLI migration commands are available:<\/p>\n\n\n\n

ng generate @angular\/core:signal-input-migration
ng generate @angular\/core:signal-queries-migration
ng generate @angular\/core:output-migration<\/code><\/p>\n\n\n\n

Initial feedback from these automated migrations is very positive.<\/p>\n\n\n\n

The third update<\/strong>, a new type of Signal (in developer preview) called linkedSignal<\/a><\/code>. This new function also creates a\u00a0computed signal<\/a>\u00a0that can be written manually<\/span>. In other words, a computed<\/code> signal is read-only, whereas a linkedSignal<\/code> is writable while preserving automatic update and computation features of a computed<\/code> signal.<\/p>\n\n\n\n

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

Here is a code example:<\/p>\n\n\n\n

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

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

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

The approach is similar to ngx-signalify<\/a> or TanStack Query<\/a>, and it looks promising. Now, resource<\/code> 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<\/a>. 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.<\/p>\n\n\n\n

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

<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,29],"tags":[],"class_list":["post-2228","post","type-post","status-publish","format-standard","hentry","category-angular","category-signals"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=2228"}],"version-history":[{"count":4,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2228\/revisions"}],"predecessor-version":[{"id":2233,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/2228\/revisions\/2233"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=2228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=2228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=2228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}