Angular | ExpressionChangedAfterItHasBeenCheckedError | Lets see why it comes and how can fix it | Also debug :)
Being an Angular developer, I see many times ExpressionChangedAfterItHasBeenCheckedError error comes during development. And online explanation of this error sometime get you confused because explanation is not clear enough or may be too long to digest. :)
So I personally dig into it and understand why this issue comes. In this article I will try to explain in very simple language why this issue comes and I am sure that after reading this article you will never get confused about it and will also be able to fix this issue if comes.
As we all know that Angular is based on MVVM (Model-View-View-Model) architecture. So Model is binded (data) with View (html) and as soon as any change happens with the model, that change gets reflected on the view but to do this Angular runs digest cycle in the background which keep on checking the new model value with the old model value. And if there is a change between old and new then the new value is applied on the view.
Lets see why this error comes-
Now lets say when Angular is applying the new model value to the View, if during that phase if we again try to change the model value then Angular throws ExpressionChangedAfterItHasBeenCheckedError error because at this point Angular gets confused which value needs to be applied because digest cycle was already run but during applying phase, the model value again gets changed which was not informed to Angular.
This error comes most of the time when we are using ngAfterViewInit or ngAfterContentInit life cycle hooks and changing model value from there. Because these life cycle hooks gets called when Angular applying model values to the View.
Lets see by example-
In the above code, AppComponent is using HelloComponent and we are showing is by passing show flag to *ngIf.
If you run above code then it will run perfectly without throwing any error.
Below will be the output-
Now lets see when ExpressionChangedAfterItHasBeenCheckedError error will come. Just modify app.component.ts file as below-
and now if you try to run the code then you will get ExpressionChangedAfterItHasBeenCheckedError error in the console because in the above code as I already explained, we are trying to update show flag (model value) to false in ngAfterViewInit method which is called when Angular applying model values to the View.
Below will be the output-
Now question comes how we can fix it ? Lets see-
As I already explained above that this error comes because once the digest cycle is run and Angular started applying mode values to the View, during that phase if we try to update the model values then we have to inform to the Angular that there are new changes available to the model data and Angular again needs to run digest cycle.
To do this, Angular already exposed ChangeDetectorRef service which provides detectChanges() method which runs the digest cycle with new model values and solve this issue.
So to fix this error, you just need to do below changes to app.component.ts file-
Now this error will be gone!!!
Now lets see how to debug to know from where this issue is coming
When this error comes on the console, you just need to follow the below steps and you will get the place from where this error is coming-
- Run the application, open the chrome dev tool and navigate to the console tab
2. click on core.js file, it will take you to the below place (make sure put a debug point here)
3. Re -run the application and see the call stack
4. just scroll to the call stack and search html file in the call stack
5. once you get the html file and just click on it and it will take you to the html place from where this error is coming
I hope after reading this full article, you will now never get confused understanding this error, debug this error and also fix this error.
Stay tuned and subscribe my medium channel!!!