ExpressionChangedAfterItHasBeenCheckedError is Angular’s way of telling you that a value changed between when Angular checked it and when it rendered it. This only appears in development mode.

What causes this error

1. Modifying data in ngAfterViewInit — the view is already checked, then you change something
2. A parent component changing a child’s input during change detection
3. Async operations that complete synchronously — like a resolved Promise in a getter

Fix 1: Use setTimeout or ChangeDetectorRef

// ❌ Causes the error
ngAfterViewInit() {
  this.isLoaded = true;
}

// ✅ Delay to next change detection cycle
ngAfterViewInit() {
  setTimeout(() => this.isLoaded = true);
}

// ✅ Or manually trigger change detection
constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
  this.isLoaded = true;
  this.cdr.detectChanges();
}

Fix 2: Move logic to ngOnInit

If possible, set values in ngOnInit instead of ngAfterViewInit:

// ✅ ngOnInit runs before the view is checked
ngOnInit() {
  this.isLoaded = true;
}

Fix 3: Use async pipe for observables

<!-- ❌ Subscribing in component and setting a property -->
<div>{{ data }}</div>

<!-- ✅ Use async pipe — Angular handles the timing -->
<div>{{ data$ | async }}</div>

When to ignore it

This error only appears in development mode. It’s a warning that your data flow might cause issues, but it won’t crash production. However, fixing it usually means your data flow is cleaner.