{"id":920,"date":"2023-05-09T05:00:00","date_gmt":"2023-05-09T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=920"},"modified":"2023-05-08T14:20:58","modified_gmt":"2023-05-08T21:20:58","slug":"anti-pattern-series-calling-a-method-in-a-template","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/anti-pattern-series-calling-a-method-in-a-template\/","title":{"rendered":"Anti-pattern series: Calling a method in a template"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">If you&#8217;re calling a method\/function in the HTML template of any of your components, try the following experiment: Add a <code>console.log(\"here\")<\/code> inside that method.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Then, interact with your application by clicking around, entering information in a form, etc. What you&#8217;ll see in your console is something like this:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"178\" height=\"232\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-7.png\" alt=\"\" class=\"wp-image-925\"\/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Why is this happening? Angular&#8217;s <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/change-detection-for-angular-components\/\" target=\"_blank\" rel=\"noopener\" title=\"\">change detection<\/a> runs every time an event occurs in the browser. Zone.js tells Angular that &#8220;something happened&#8221; when we interact with an Angular application. Then, Angular checks its component tree for updates. If you&#8217;re using methods in your HTML templates, the only way for Angular to see if the output of that method has changed is to&#8230; call it again. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As a result, using methods in your HTML templates is not recommended. Doing so can impact performance negatively. Instead, use bindings to class properties as follows:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Before: <\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"408\" height=\"32\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-8.png\" alt=\"\" class=\"wp-image-926\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-8.png 408w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-8-300x24.png 300w\" sizes=\"auto, (max-width: 408px) 100vw, 408px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>After:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"350\" height=\"26\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-9.png\" alt=\"\" class=\"wp-image-927\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-9.png 350w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-9-300x22.png 300w\" sizes=\"auto, (max-width: 350px) 100vw, 350px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Note that if you need to call a method\/function to perform some formatting, you should <a href=\"https:\/\/blog.angulartraining.com\/tutorial-how-to-create-your-own-angular-pipe-cc9ab3796e1e\" target=\"_blank\" rel=\"noopener\" title=\"\">create a custom pipe<\/a>. Pipes are designed to run<strong> only when their input data changes<\/strong>, which means they are optimized for best performance by default.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can take a look at an <a href=\"https:\/\/stackblitz.com\/edit\/angular-gb7hn9?file=src%2Fmain.ts,src%2Fmain.html,src%2Ffunky-string.pipe.ts\" target=\"_blank\" rel=\"noopener\" title=\"\">example here on Stackblitz<\/a>. I added a <code>console.log(\"here\")<\/code> inside my custom pipe to showcase that it runs only once:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"521\" height=\"27\" src=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-10.png\" alt=\"\" class=\"wp-image-928\" srcset=\"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-10.png 521w, https:\/\/www.angulartraining.com\/daily-newsletter\/wp-content\/uploads\/2023\/05\/image-10-300x16.png 300w\" sizes=\"auto, (max-width: 521px) 100vw, 521px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re calling a method\/function in the HTML template of any of your components, try the following experiment: Add a console.log(&#8220;here&#8221;) inside that method. Then, interact with your application by clicking around, entering information in a form, etc. What you&#8217;ll see in your console is something like this: Why is this happening? Angular&#8217;s change detection [&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,28,8],"tags":[],"class_list":["post-920","post","type-post","status-publish","format-standard","hentry","category-angular","category-anti-patterns","category-components"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/920","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=920"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/920\/revisions"}],"predecessor-version":[{"id":930,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/920\/revisions\/930"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=920"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=920"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=920"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}