{"id":1691,"date":"2023-10-27T05:00:00","date_gmt":"2023-10-27T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1691"},"modified":"2023-10-26T16:51:06","modified_gmt":"2023-10-26T23:51:06","slug":"perf-and-template-syntax-example-3","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/perf-and-template-syntax-example-3\/","title":{"rendered":"Perf and template syntax \u2013 Example 3"},"content":{"rendered":"\n

Yesterday, we looked at the pros and cons of our second code example<\/a>.<\/p>\n\n\n\n

Today, let’s cover the pros and cons of our third and final example:<\/p>\n\n\n\n

Example #3 – Signal<\/strong><\/p>\n\n\n\n

<div *ngFor=\"let data of dataSignal()\">{{data.name}}<\/div><\/code><\/p>\n\n\n\n

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

This last example is very interesting for a few reasons. First, if you follow Angular best practices, you might be screaming that we’re calling a method in a template, and you would discard that code immediately. <\/p>\n\n\n\n

But the thing is, this is a Signal, and Signals are different<\/a>. It’s perfectly fine to call a Signal in a template, and as a matter of fact, this is the way to do it so Angular knows where Signals are read and can then optimize DOM updates based on that information.<\/p>\n\n\n\n

Even better, when we use a signal with ngFor<\/code>, the subscriber to that signal is actually a view (an instance of ng-template<\/a>) and not the entire component. When Signal-based components<\/a> become part of the framework, Angular will be able to re-render just that view instead of the entire HTML template of that component.<\/p>\n\n\n\n

What are the cons, then?<\/strong><\/p>\n\n\n\n

The only downside of Signals is that they require Angular v16+, so you’ll need to upgrade your apps to use them. The other downside is that the full benefits of improved change detection are not there yet and won’t land in v17 either, but the Angular team is making steady progress, and some early parts of Signal-based components were released in version 16.2<\/a>.<\/p>\n\n\n\n

Other than that, Signals are the way to go. if you’re just getting started with Angular and building a new app, I believe you should use Signals as much as possible.<\/p>\n","protected":false},"excerpt":{"rendered":"

Yesterday, we looked at the pros and cons of our second code example. Today, let’s cover the pros and cons of our third and final example: Example #3 – Signal <div *ngFor=”let data of dataSignal()”>{{data.name}}<\/div> This last example is very interesting for a few reasons. First, if you follow Angular best practices, you might be […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,31,20,29,7],"tags":[],"class_list":["post-1691","post","type-post","status-publish","format-standard","hentry","category-angular","category-best-practices","category-performance","category-signals","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1691","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=1691"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1691\/revisions"}],"predecessor-version":[{"id":1696,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1691\/revisions\/1696"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}