Skip to content

Instantly share code, notes, and snippets.

@vades
Last active August 11, 2025 08:19
Show Gist options
  • Save vades/a225170304f34f88a7a5d48bf4b1f58c to your computer and use it in GitHub Desktop.
Save vades/a225170304f34f88a7a5d48bf4b1f58c to your computer and use it in GitHub Desktop.
Fixing "Expression has changed after it was checked" in Angular

Fixing "Expression has changed after it was checked" in Angular

The exception appears (in the development mode) at the moment the value is checked and value is different of the updated value.

Error message example

AppComponent.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: true'. Current value: 'ngIf: false'.
    at viewDebugError (core.js:20440)
    at expressionChangedAfterItHasBeenCheckedError (core.js:20428)
    at checkBindingNoChanges (core.js:20530)
    at checkNoChangesNodeInline (core.js:23401)
    ...

Solution

In your component import ChangeDetectorRef, AfterContentChecked

import { Component, OnInit, ChangeDetectorRef, AfterContentChecked } from '@angular/core';

Add ngAfterContentChecked()

 ngAfterContentChecked(): void {
    this.changeDetector.detectChanges();
  }

Component example

src\app\app.component.ts

import { Component, OnInit, ChangeDetectorRef, AfterContentChecked } from '@angular/core';
import { Title } from '@angular/platform-browser';

import { environment } from '@env/environment';
import { LayoutService } from '@app/core/layout/layout.service';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: []
})
export class AppComponent implements OnInit, AfterContentChecked {
  env = environment;
  title = this.env.appName;
  partials: any = {};

  public constructor(
    private titleService: Title,
    public layout: LayoutService,
    private changeDetector: ChangeDetectorRef,
  ) {}

   ngOnInit() {
    this.titleService.setTitle(this.env.appName);
    
    this.layout.getLayout().subscribe(partials => {
      this.partials = partials;
    });
  }

  ngAfterContentChecked(): void {
    this.changeDetector.detectChanges();
  }
}
@ram-mboad
Copy link

Thank a lot !!!

@aminisana
Copy link

thanks a lot !!

@DoronovIV
Copy link

You don't actually need ngAfterContentChecked. Just put this.changeDetector.detectChanges(); at the end of the ngOnInit scope.

Detecting changes in the ngAfterContentChecked nullifies the purpose of the OnPush strategy. It will significantly affect the performance in a real-life component.

@quyettranvu
Copy link

It worked in Angular v18, thank you very much!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment