{"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<p>Yesterday, we looked at the pros and cons of our <a href=\"http:\/\/perf-and-template-syntax-example-1\" target=\"_blank\" rel=\"noopener\" title=\"first code example\">first code example<\/a>.<\/p>\n\n\n\n<p>Today, let&#8217;s cover the pros and cons of our second example:<\/p>\n\n\n\n<p><strong>Example #2 &#8211; Observable<\/strong><\/p>\n\n\n\n<p><code>&lt;div *ngFor=\"let data of getData() | async\"&gt;{{data.name}}&lt;\/div&gt;<\/code><\/p>\n\n\n\n<p>This code is calling a method in a template, too, and that&#8217;s a lot worse than in example #1. Here&#8217;s why: If the <code>getData()<\/code> method returns an Observable by calling <code>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<p><strong>How to fix it?<\/strong><\/p>\n\n\n\n<p><code>&lt;div *ngFor=\"let data of data$ | async\"&gt;<\/code><\/p>\n\n\n\n<p>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<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-keyword\">constructor<\/span>(service: DataService) {  \n   <span class=\"hljs-keyword\">this<\/span>.data$ = servie.getData();\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p>At this point the code is pretty much optimal because:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>We have <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/how-to-avoid-memory-leaks-with-rxjs-observables\/\" target=\"_blank\" rel=\"noopener\" title=\"\">automatic subscription and unsubscription thanks to the async pipe<\/a><\/li>\n\n\n\n<li>No method is called in the template<\/li>\n<\/ul>\n\n\n\n<p>The only con is the async pipe syntax and working with Observables, which is often considered the most complex part of the Angular learning curve.<\/p>\n\n\n\n<p> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday, we looked at the pros and cons of our first code example. Today, let&#8217;s cover the pros and cons of our second example: Example #2 &#8211; Observable &lt;div *ngFor=&#8221;let data of getData() | async&#8221;&gt;{{data.name}}&lt;\/div&gt; This code is calling a method in a template, too, and that&#8217;s a lot worse than in example #1. Here&#8217;s [&hellip;]<\/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-1686","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\/1686","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=1686"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1686\/revisions"}],"predecessor-version":[{"id":1693,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1686\/revisions\/1693"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1686"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1686"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1686"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}