[Solved] Error NG0100: Expression has changed after it was checked

Many Angular developers face this common Error NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. There is no need to worry about we you are at the correct place to find its solution. We faced the same error and received the below error message in the console.

ERROR NG0100 Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘errorsea’.

When Error “ERROR: NG0100 OR ExpressionChangedAfterItHasBeenCheckedError” Occurs?

This error occurs when any change is detected in values after the view is initialized. This error only occurs in development mode.
In development mode, the Angular compiler basically checks for change detection of values after the view is initialized to make sure all values are unchanged.
In simple words, assigning variables incorrectly in Angular lifecycle which causes variable state after a view is initialized results in Error: NG0100.

Error Situation: Changing Variable Value After View Init

When we have initialized variable values and we try to change them after a view is initialized using the ngAfterViewInit method OR ngOnChange, this error appears in the browser’s console.

Error NG0100 Expression Has Changed After It Was Checked Angular
ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘undefined’. Current value: ‘errorsea’.

Code Causing the Error

Now we know when the Error NG0100 occurs. Let’s understand with the code.

app.component.html

Here,  I have used a variable “title” to display dynamic content. The value of that variable comes from app.component.ts file

error ng0100 app component html

app.component.ts

In this file, we can see that the title variable is undefined initially and initiated after view initialization using ngAfterViewInit.

error ng0100 app component js

Solution for Error NG0100

As we know the Error NG0100 occurs due to a change in variable value after view initialization in Angular. The solution is simple we have to initialize values for all variables on view initialization. There are two methods to initialize values on view initialization.

  1. Using Constructor
  2. Using ngOnInit

Method 1: Solve NG0100 Using Constructor

Angular constructor helps to initialize variables before view initializes. We can see the correct implementation to use Angular constructor to solve the “ng0100:Expression Changed After It Has Been Checked Error” in the below screenshot.

solved error ng0100 using constructor

Method 2: Solve NG0100 Using OnInit

Angular OnInit helps to initialize variables when view initialization starts in Angular. Also, Angular processes all the mentioned procedures inside “OnInit” before view initialization completes. We can see the correct implementation to use Angular OnInit to solve the “ng0100:Expression Changed After It Has Been Checked Error” in the below screenshot.

solved error ng0100 using onInit

Output After Solution Applied

We can choose any method mentioned above. The output will be the same and you will see no error message of NG0100 or Expression has changed after it was checked. In our example, the console output will be as the below screenshot.

error ng0100 solved

Read Also: [Solved] Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular CLI

Conclusion

I hope now you have a complete understanding of “Error NG0100” and “Error: Expression has changed after it was checked”, how this error occurs and the complete solution with an easy approach.

Happy Coding 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *