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

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

Today, let’s cover the pros and cons of our second example:<\/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

This code is calling a method in a template, too, and that’s a lot worse than in example #1. Here’s why: If the getData()<\/code> method returns an Observable by calling httpClient.get()<\/code> (or a service that makes that same call) then the async pipe subscribes to it and receives the data, which triggers change detection, so Angular calls getData() again, gets a new Observable, the async pipe subscribes to it, and there you have an infinite loop of HTTP requests that will bring down your browser for sure, and possibly your server.<\/p>\n\n\n\n

How to fix it?<\/strong><\/p>\n\n\n\n

<div *ngFor=\"let data of data$ | async\"><\/code><\/p>\n\n\n\n

Store the Observable in a variable instead of calling a method, and the problem is solved. You can assign that Observable in the constructor of your component as follows:<\/p>\n\n\n

constructor<\/span>(service: DataService) {  \n   this<\/span>.data$ = servie.getData();\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
At this point the code is pretty much optimal because:<\/p>\n\n\n\n