Explained : ExpressionChangedAfterItHasBeenCheckedError
Learn about the cause of ExpressionChangedAfterItHasBeenCheckedError and how to avoid this error
As an Angular Developer, you might have come across the error ExpressionChangedAfterItHasBeenCheckedError. This is very common error that can be seen while developing and utilizing the angular life cycle events.
In this lesson, we will learn about the cause of this error and how to avoid this error. This error mainly seen in development environment. It might not occur in production environment.
Generally, developer ignores this error, thinking that it is just an error and not impacting any functionality but this error can cause a performance impact or other functionality failure.
Let’s understand why this error occurs.
Mainly this error occurs when developer implements child component’s life cycle events like ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit or ngAfterViewChecked. Wrong implementation of any of these method can cause this issue. we will see it by below example.
In above example — we have created CardComponent, which is has a childComponent used inside its template. ChildComponent is having the content projection ( using ng-content ). Child Component expects ImageUrl to be passed from Parent Component ( CardComponent ).
CardComponent has implemented “ngAfterViewChecked()” life cycle event and this event is updating the “imageUrl” which is being used as part of content projection.
As you are updating the content during the angular is running change detection and checking for the content is changed or not, we encounter this error.
ExpressionChangedAfterItHasBeenCheckedError : Expression changed after it was checked, Previous value: “imageUrl”, currentValue: “” (blank)
Reason for this error -
While running change detection, angular is going to check if some of the data used by content has been changed or not. immediately, after this check, angular is going to call “ngAfterContentChecked()” life cycle event in order to notify the component that framework has finished checking the content part for changes.
we try to check using “ngAfterContentChecked()” if data has to be changed in order to re-render the component and the processing of checking the data is again changes the data itself.
Here Angular is trying to build the View based on some initial data and the process of building the view has itself changed/modified the data. So Angular doesn’t know what to use here in this case and it throws the error Here.
we can’t modify the property that is being used in the content part of component. when you try to modify property after angular has finished the content check, it is going to be problematic.
It can create potential loop or we can run into a situation where the View would accurately reflect the last value of the model.
Goal of this event is to always reflect the latest data change into the view .
How to avoid -
So to avoid this error, do not change the content projection data into “ngAfterContentInit() (as content gets initialized here)” or “ngAfterContentChecked()”.
This applies for other life cycle events as well when you try to modify view data during “ngAfterViewInit()” or “ngAfterViewChecked” OR you try to modify the project content during “ngAfterContentInit()” or “ngAfterContentChecked()” life cycle events.
Read more about the life cycle event here — https://garghimanshu.medium.com/angular-understanding-life-cycle-hooks-events-c7d3122fac52
