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

angular-expression-changed.md

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();
  }
}