{"id":388,"date":"2023-02-03T05:00:00","date_gmt":"2023-02-03T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=388"},"modified":"2024-10-21T12:34:20","modified_gmt":"2024-10-21T19:34:20","slug":"change-detection-for-angular-components","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/change-detection-for-angular-components\/","title":{"rendered":"Change detection for Angular components"},"content":{"rendered":"\n<p>Angular comes with two component change detection strategies: <code>default<\/code> and <code>onPush<\/code>.<\/p>\n\n\n\n<p><code>Default<\/code> is used by default: Angular will check if your component needs to be refreshed<strong> every time something happens in the browser<\/strong>. Zone.js triggers such change detection by notifying Angular when a DOM event happens (someone clicked on a button) or a <code>setTimeout<\/code> completes, or an HTTP request completes. <\/p>\n\n\n\n<p>In other words, any time a callback function runs in the browser, Angular will check if our components need to be re-rendered with new data.<\/p>\n\n\n\n<p>With <code>onPush<\/code>, the change detection behavior changes. <code>onPush<\/code> indicates that our component only relies on <strong>inputs <\/strong>to display data (in other words &#8211; it&#8217;s a <strong>presentation component<\/strong>) and that DOM events or HTTP requests do not impact the HTML rendering of that component.<\/p>\n\n\n\n<p>As a result, you can use <code>onPush<\/code> to improve the performance of your presentation components, which is another good reason to follow the <a href=\"https:\/\/www.angulartraining.com\/daily-newsletter\/container-vs-presentation-components\" target=\"_blank\" rel=\"noopener\" title=\"\">presentation vs. container components<\/a> approach covered yesterday. The <a href=\"https:\/\/angular.dev\/best-practices\/skipping-subtrees#common-change-detection-scenarios\" target=\"_blank\" rel=\"noopener\" title=\"\">official documentation here shows an in-depth dive into change detection strategies<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular comes with two component change detection strategies: default and onPush. Default is used by default: Angular will check if your component needs to be refreshed every time something happens in the browser. Zone.js triggers such change detection by notifying Angular when a DOM event happens (someone clicked on a button) or a setTimeout completes, [&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,8],"tags":[],"class_list":["post-388","post","type-post","status-publish","format-standard","hentry","category-angular","category-components"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/388","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=388"}],"version-history":[{"count":5,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/388\/revisions"}],"predecessor-version":[{"id":2201,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/388\/revisions\/2201"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}