ExpressionChangedAfterItHasBeenCheckedError Angular. [SOLVED] – Mat Form Field and NgIf

Last modified date

Comments: 0

The expressionChangedAfterItHasBeenCheckedError error in Angular 2 is a very common error with many reasons as to what could trigger it.

Problem

One of the less common causes of this error is when you have a mat-form-field and an *ngIf on the input element inside of the mat-form-field. For example:

<mat-form-field>
    <input *ngIf='someBoolean'>
</mat-form-field>

The code above will cause Angular to throw the expressionChangedAfterItHasBeenCheckedError in the console.

Solution

The easiest way to solve this error is to move the *ngIf from the input element to mat-form-field itself.

<mat-form-field *ngIf='someBoolean'>
    <input>
</mat-form-field>

References

https://github.com/angular/components/issues/16209

JakTech

Leave a Reply

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

Post comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.