ExpressionChangedAfterItHasBeenCheckedError (NG0100) in Angular

This is the most common Angular runtime error ExpressionChangedAfterItHasBeenCheckedError (NG0100). Many Developers face this error in Angular.

When does this error occur?

This error occurs, especially when working with change detection, lifecycle hooks, and asynchronous data.

Flow Structure

Angular checked a value → then that value changed → Angular throws an error.

Typical Error Message

Suppose you have a previous value that is false and currect value that is true.

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError:
Expression has changed after it was checked.
Previous value: 'false'.
Current value: 'true'.

Why Does This Error Occur?

There are many reasons to get this error.

1. You modify a bound variable inside lifecycle hooks.
2. You update data after the view is initialized.
3. You change the value in ngAfterViewInit and ngAfterContentInit.
4. You update the value using setTimeout, Promise, and Observables.
5. You manipulate the DOM directly.

Common Scenarios That Cause This Error and Solution

1. You are updating the value in ngAfterViewInit

Angular already checked isVisible, and now it’s changed, so this error will be occur.

ngAfterViewInit() {
  this.isVisible = true;
}

✅ Correct Way

import { ChangeDetectorRef } from '@angular/core';

constructor(private cd: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.isVisible = true;
  this.cd.detectChanges();
}

2. Asynchronous Data Update

Value is changed after Angular’s first check.

ngOnInit() {
  setTimeout(() => {
    this.name = 'John';
  });
}

✅ Correct way

ngAfterViewInit() {
  setTimeout(() => {
    this.name = 'John';
  });
}

3. Angular expects data initialization in ngOnInit.

❌ Wrong way to initialize data

ngAfterViewInit() {
  this.count = 10;
}

✅ correct way

ngOnInit() {
  this.count = 10;
}

4. Use async Pipe instead of manually subscribing

ngOnInit() {
  this.userService.getUser().subscribe(data => {
    this.user = data;
  });
}

✅ You should prefer async pipe

<div *ngIf="user$ | async as user">
  {{ user.name }}
</div>