{"id":1678,"date":"2023-10-24T05:00:00","date_gmt":"2023-10-24T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1678"},"modified":"2023-10-22T15:07:59","modified_gmt":"2023-10-22T22:07:59","slug":"performance-and-template-syntax","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/performance-and-template-syntax\/","title":{"rendered":"Performance and template syntax"},"content":{"rendered":"\n

Today, I’d like to challenge you with a small exercise. Take a minute to examine the three following code examples and decide which option performs best. Note how similar those three options are from a syntax standpoint, yet they yield very different results performance-wise:<\/p>\n\n\n\n

Example #1 – Array of data<\/strong><\/p>\n\n\n\n

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

Example #2 – Observable<\/strong><\/p>\n\n\n\n

<div *ngFor=\"let data of getData() | async\">{{data.name}}<\/div><\/code><\/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

Feel free to list the pros and cons of each approach. You can even respond to that email with your answers if you want. Tomorrow, I’ll give you my insights.<\/p>\n","protected":false},"excerpt":{"rendered":"

Today, I’d like to challenge you with a small exercise. Take a minute to examine the three following code examples and decide which option performs best. Note how similar those three options are from a syntax standpoint, yet they yield very different results performance-wise: Example #1 – Array of data <div *ngFor=”let data of getData()”>{{data.name}}<\/div> […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,20,7],"tags":[],"class_list":["post-1678","post","type-post","status-publish","format-standard","hentry","category-angular","category-performance","category-template-syntax"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1678","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=1678"}],"version-history":[{"count":2,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1678\/revisions"}],"predecessor-version":[{"id":1680,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1678\/revisions\/1680"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}