How does ExpressionChangedAfterItHasBeenCheckedError resolve?
How to fix ExpressionChangedAfterItHasBeenCheckedError
- Fix one: tell Angular to pick up the changes.
- Solution two: move the code away from ngAfterViewInit.
- Solution three: Use OnPush change detection.
- Fix four: Avoid mutations of @Input properties.
Table of Contents
How do I fix ExpressionChangedAfterItHasBeenCheckedError in Angularjs?
Listen to this out loud. Pause A good way to fix the ExpressionChangedAfterItHasBeenCheckedError is to let Angular know that you’ve changed the code after you’ve completed your first check. You can do this using setTimeout so the error will go away.
Why ExpressionChangedAfterItHasBeenCheckedError?
Hear This Out Loud PauseAngular throws an ExpressionChangedAfterItHasBeenCheckedError when an expression value has been changed after change detection has completed. Angular throws the error to ensure that the data is always correctly reflected in the view, preventing erratic UI behavior or a possible infinite loop.
What is the use of ChangeDetectorRef?
Hear This Out Loud PauseChangeDetectionStrategy and ChangeDetectorRef can be applied to components to perform change detection on new references rather than when data changes.
Is it good to use ngDoCheck?
Listen to this out loudPauseWhen should you use ngDoCheck? Use ngDoCheck when you want to capture changes that Angular doesn’t otherwise capture. For example, if the link references remain unchanged after a click event, ngOnChanges will not run but ngDoCheck will.
When is expressionchangedafterisbeenchecked error thrown in angular?
ExpressionChangedAfterItHasBeenCheckedError is hands down my favorite error in Angular apps. I encountered this error a lot when I started working with Angular. According to GitHub, so do many others. When will ExpressionChangedAfterItHasBeenCheckedError be thrown? The most common reasons are:
What does “the expression has changed after it was checked” mean?
Previous value: ‘[objeto Objeto]’. Current value: ‘true’. at viewDebugError (core.js:9515) at expressionChangedAfterItHasBeenCheckedError (core.js:9493) at checkBindingNoChanges (core.js:9662) This error tells us that there is a problem with an expression in the template, but the question is which expression?
Why is change detection thrown on angular expressions?
So updating the flag inside ngOnChanges() will not start change detection. Then, once change detection has naturally fired again, the value of the flag has changed and the error is thrown. In my case, I changed this:
Why has the ngif expression changed after it was checked?
As we can see, loadLessons() is emitting a new value for the loading$ Observable (it’s setting the loading flag to true), and it’s doing it synchronously, before the asynchronous call to the backend. Note that this $loading observable is the one used in the ngIf expression that shows or hides the loading indicator.