A gentle introduction into change detection in Angular

[maxkoretskyi]

This article describes the use case that results into common ExpressionChangedAfterItHasBeenCheckedError and uses it to explore change detection mechanism and related internal implementation details in depth.

Read the article here.

[androizer]

Hi @maxkoretskyi. I just love the in-depth knowledge that you've been giving for the angular ecosystem. A big thumbs-up (👍) for such an amazing task you do to educate the community. Btw, the link to several articles for change detection is broken. Can you fix that? That would be a great read for the weekend.

[maxkoretskyi]

Hey, thanks for the catch! Updated the article

[jvinceller]

It takes quite a few hours to write that article and it helps a lot, so, yeah, thanks!

[maxkoretskyi]

More to come 😎

[deqing]

So in this code

export class AppComponent {
    _time;
    get time() {  return this._time; }

    constructor() {
        this._time = Date.now();
        
        setInterval(() => {
            this._time = Date.now();
        }, 1);
    }
}

we update the value 100 times per second? Even when user is not clicking the button? Sounds like a performance impact to me comparing to the old version.

[maxkoretskyi]

Even when user is not clicking the button?

that's because Angular tries to do change detection for you. You have many mechanisms to control that and avoid performance hit:

• Using NgZone to run some code outside of Angular to avoid triggering change detection is a common optimization technique.
• Making components OnPush to only run change detection when you markForCheck it explicitly or click a button

[Teebo]

My question might be out of context, but for some reason, my break point does not work.
I have searched for the file core.js in the dev tools and search for function checkAndUpdateView, I've put a break point
and clicked the "Trigger change detection" button.
I have recreated the project as the link to the project does not load:

My Angular version is 12.2.0

Is there anyone who has experienced the same?

[maxkoretskyi]

can you record a video of what you're doing, publish it somewhere and post a link here? I'll take a look

[Teebo]

Hi @maxkoretskyi , please see a the video on the link: https://drive.google.com/file/d/1NQlhUjygzQh2So3zUgiCxYEP9PpLuKyn/view?usp=sharing

[maxkoretskyi]

is any other breakpoint triggered?

[Teebo]

No, I have randomly added one inside function enterView and refreshed the page, the code breaks here.
But does not break inside the checkAndUpdateView

[maxkoretskyi]

If you're using Ivy, you should put a breakpoint inside refreshView:

[Teebo]

Great! thanks @maxkoretskyi that worked.

[maxkoretskyi]

Glad it worked!

[bipulronin]

Hi, Could you please verify the parent value change from child in child's ngOnInit and ngOnChanges in the latest angular version?. Coz when I checked, for the version 12.1.5, the error is thrown when the change is done in child's ngOnChangesor ngOnInit. I am guessing this is a mistake in the article. Coz, it is explained differently in https://indepth.dev/posts/1001/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error

[maxkoretskyi]

Yeah, do you mean that I write:

Now, let’s do the same for the property name that is used in the template expression of the parent A component:

ngOnInit() {
    this.parent.name = 'updated name';
}

And now everything works OK. How come?
Well if you take an attentive look at the operations order you will see that the ngOnInit lifecycle hook is triggered before the DOM update operation.That’s why there’s no error.

While in Angular v12 it actually throws the error, right?

[jbgomez21]

Hi @maxkoretskyi, Thanks for all excellent articles about Angular.
There's no doubt it's the best site about Angular.

[Landy510]

Hi @maxkoretskyi , I have a question.
Is child component's change detection step including DOM rendering?

Is my understanding about child component's change detection correct?

Thank you for your articles.

[maxkoretskyi]

ChangeDetection process runs the same set of steps for all components (child/parent). Take a look at this function:

/**

• Processes a view in update mode. This includes a number of steps in a specific order:
• • executing a template function in update mode;
• • executing hooks;
• • refreshing queries;
• • setting host bindings;
• • refreshing child (embedded and component) views.
    */

[serser322]

Hello, @maxkoretskyi

I am confused about a piece of code in First encounter,

What's the mean of (click)="0" in the button tag ? Why this can call the function ?

Thanks !

(By the way, you wrote a very useful article, thanks a lot!)