Expression Has Changed After It Was Checked — Angular Basics

Exploring the `ExpressionChangedAfterItHasBeenCheckedError` error you might face while Angular development.

Image by Author | Prepared with MS Powerpoint

When you are programming your project with angular, generally you can face the error like below mostly on your dev environments,

Expression has changed after it was checked. Previous value: ‘ng-untouched: true’. Current value: ‘ng-untouched: false’

I will give an explanation and a solution to the issue. Hope it will be helpful for you.

Usually such questions (like, Previous value: ‘foo foo’. Current value: ‘bar bar’) come up because Angular developers do not understand how change detection works and why the check that produces this error is required. Many developers even view it as a bug. But it’s certainly not. This is a cautionary mechanism put in place to prevent inconsistencies between model data and UI so that erroneous or old data are not shown to a user on the page.

First, let me give you the solution, I know — Nobody reads theory much! 😉

You are listening to DOM element events.

(change)="onChange(element.value)"