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

Yesterday, I sent you 3 different examples of Angular binding syntaxes<\/a> and asked you to take a look at them and identify the pros and cons of each one.<\/p>\n\n\n\n

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

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

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

The only pro of this example is the simplicity of the syntax. Other than that, the syntax uses one of the anti-patterns covered earlier in this newsletter: Calling a method in a template<\/a>. The problem is that this method will be called a lot more than you’d think, and if that code happened to create a new array every single time, it could be really bad in terms of performance, as Angular would have to re-render the entire list pretty much every time the user does anything in the application.<\/p>\n\n\n\n

What can we do to improve it?<\/strong><\/p>\n\n\n\n

    \n
  1. Use a variable instead of a method – this fixes the performance issue right away:

    <div *ngFor=\"let data of dataList\"><\/code>
    <\/li>\n\n\n\n
  2. Use a trackBy function<\/a> to avoid useless re-renders. By telling Angular what’s the unique ID of each list item, Angular would be less confused, but it’s a sub-par solution:

    <div *ngFor=\"let data of getData(); trackBy: trackById\"><\/code><\/li>\n<\/ol>\n\n\n\n

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

    Conclusion<\/strong><\/p>\n\n\n\n

    If you want to iterate over data that’s in your component (not an observable or a Signal), then use a variable instead of calling a method. Easy enough.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Yesterday, I sent you 3 different examples of Angular binding syntaxes and asked you to take a look at them and identify the pros and cons of each one. Today, let’s cover the pros and cons of our first example: Example #1 \u2013 Array of data <div *ngFor=”let data of getData()”> The only pro of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,7],"tags":[],"class_list":["post-1684","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-template-syntax"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t