How can Angular’s “Expression changed after it has been checked” error be fixed?

Don’t have Medium Premium, read it for free here: Simplified Ninja Blog

Our application has a custom scroll behavior, which means we have to perform some computations on the scroll. However, the problem with the scroll event is that it emits too many events at once. Manipulating data this frequently in Angular often results in an “Expression changed after it has been checked” error.

You might have encountered this error in other situations, especially when you have some code written inside `ngAfterViewInit.’ This may lead to inconsistent UI rendering and performance issues on scale.

value=10;
ngAfterViewInit(){
 this.value = 100;
}

Now the question is:

• What is the root cause of this issue?
• How to address this issue?
• Finally, some tips to avoid this error in the first place while developing.

Introduction

When something changes, Angular efficiently updates the DoM. This mechanism traverses the component tree and compares expressions’ current and previous values. If a change is detected, Angular updates the DOM accordingly.