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.


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:

    <input *ngIf='someBoolean'>

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


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'>



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.