Angular: ExpressionChangedAfterItHasBeenCheckedError

Educational use only. Content explains errors and defensive fixes for systems you own or are authorised to test. Do not use any technique here to access data, accounts, or networks without permission.

Root Cause

This error is a safeguard in Angular's development mode. Angular's change detection runs from top to bottom. After completing a change detection cycle, Angular runs a second pass in dev mode to ensure no bindings have changed during the process. If a variable bound to the template is modified *after* its parent component has already been checked (for example, a child component modifying a parent's property synchronously in `ngAfterViewInit`), Angular throws this error. It warns you that your data model is unstable and could cause an infinite loop of UI updates.

Fix / Solution

The structural fix is to rethink component architecture to avoid updating parent state from child lifecycle hooks synchronously. If you must trigger a change, push the update to the next JavaScript macro-task queue using `setTimeout(() => { ... }, 0)`, which allows Angular to finish the current change detection cycle before processing the new value. Alternatively, use asynchronous data streams (RxJS Observables) to manage state changes predictably.

Code Snippet

// ❌ Modifying parent state synchronously after view check
ngAfterViewInit() {
  this.parentData.title = "Updated by Child"; // Throws Error in Dev Mode
}

// ✅ Deferring the update to the next tick
ngAfterViewInit() {
  setTimeout(() => {
    this.parentData.title = "Updated by Child";
  }, 0);
}