Angular: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

A template value changed during the same change-detection cycle in which Angular already checked it (dev-mode only error).

Seen on: Angular

Meaning

Usually caused by updating bound state in ngAfterViewInit/ngAfterContentInit, a child modifying parent state during rendering, or getters returning new values each time.

Common causes

  • Changing bound state in ngAfterViewInit
  • Child component/directive updating parent during check
  • Getter/method in template returning a new value each call
  • Async value resolved synchronously in a lifecycle hook

⚡ Quick fix

  1. Move the update to ngOnInit or make it async (setTimeout/Promise.resolve)
  2. Use signals/observables with async pipe
  3. Avoid non-deterministic getters in templates

Detailed fix by platform

TypeScript

  1. typescript
    ngAfterViewInit() {
      queueMicrotask(() => this.loading = false);   // next tick, not mid-check
    }

How to diagnose

  1. Binding — Previous/current values in the message
  2. Hook — Which lifecycle method changes it?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.