{"id":1697,"date":"2023-10-30T05:00:00","date_gmt":"2023-10-30T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=1697"},"modified":"2023-10-27T15:29:06","modified_gmt":"2023-10-27T22:29:06","slug":"changedetectorref-markforcheck","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/changedetectorref-markforcheck\/","title":{"rendered":"ChangeDetectorRef.markForCheck()"},"content":{"rendered":"\n

The following method call is either something you’re either very familiar with or something you’ve never heard about: ChangeDetectorRef.markForCheck()<\/a><\/code><\/p>\n\n\n\n

If you’ve never heard about it, congratulations! It means you’ve been using Angular in a way that doesn’t require you to mess with change detection, and that’s an excellent thing.<\/p>\n\n\n\n

On the other end of the spectrum, if you see that method in many places in your code, your architecture might have a problem. Why is that? As we covered before, there are two types of change detection: Default <\/code>and onPush<\/code>.<\/p>\n\n\n\n

When we use onPush<\/code>, we’re telling Angular: “This is a component that relies on @Input<\/code> values to display its data, so don’t bother re-rendering that component when @Input<\/code> do not change”<\/em>.<\/p>\n\n\n\n

The thing is, sometimes people start using onPush<\/code> full of good intentions. Then, they start injecting services into their component, and when the data in those services change, the component does not re-render… So, instead of disabling ChangeDetection.OnPush<\/code> (or figuring out a better way to keep their component as a presentation component), they go to StackOverflow, where people say: Just use ChangeDetectorRef.markForCheck()<\/code>, and problem solved! Here’s a typical screenshot of such a response:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

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

That’s because ChangeDetectorRef.markForCheck()<\/code> does exactly that: It’s a way to tell Angular that something changed in our component, so Angular must check and re-render that component as soon as possible. As you can guess, this is meant to be an exception and not the rule. <\/p>\n\n\n\n

The main reason why we would use ChangeDetectorRef.markForCheck()<\/code> is if we integrate a non-Angular friendly 3rd party library that interacts with the DOM and changes values that Angular cannot see because Angular doesn’t manage that DOM. In other scenarios, we should avoid using it and think about a better architecture.<\/p>\n","protected":false},"excerpt":{"rendered":"

The following method call is either something you’re either very familiar with or something you’ve never heard about: ChangeDetectorRef.markForCheck() If you’ve never heard about it, congratulations! It means you’ve been using Angular in a way that doesn’t require you to mess with change detection, and that’s an excellent thing. On the other end of the […]<\/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,21,8,20],"tags":[],"class_list":["post-1697","post","type-post","status-publish","format-standard","hentry","category-angular","category-anti-patterns","category-architecture","category-components","category-performance"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1697","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=1697"}],"version-history":[{"count":3,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1697\/revisions"}],"predecessor-version":[{"id":1701,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/1697\/revisions\/1701"}],"wp:attachment":[{"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=1697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=1697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}