JavaScript & Web

Fix: Angular ExpressionChangedAfterItHasBeenCheckedError

One of Angular's most confusing errors. Here's what causes it and how to fix it properly.

Kiroloss Francis 269 views
angular typescript change-detection fix

The Error


ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked.

Common Cause: Setting data in ngAfterViewInit


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

export class MyComponent implements AfterViewInit {
  title = '';
  constructor(private cdr: ChangeDetectorRef) {}
  ngAfterViewInit() {
    this.title = 'Hello';
    this.cdr.detectChanges();
  }
}