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

It works fine! Thanks a lot.

It works, thanks!

It's working, thanks!

Works good 😊, Thanks

Very good bro, amazing solution!

Worked for me. Very excellent. Thanks Sir!

Thank you, @vades , for providing a solution.
I would like to inquire about its potential impact on performance.

By default, the change detection system walks the whole tree. But if you use immutable objects or observables, you can take advantage of them and check parts of the tree only if they “really change”.
These optimizations compose and do not break the guarantees the change detection provides.

Ref : Change Detection in Angular

I have used settimeout to resolve this issue

Has anyone found some better solution? Worked fine for me, but I still doubt the fact that we have to add ChangeDetectorRef to a component that does not work with changeDetection: ChangeDetectionStrategy.OnPush,

@DoronovIV I wonder the same, and it looks like it's the appropriate way: https://angular.io/errors/NG0100

check the video section "other options".

Thank you so mush...Its work like magic

I'll never understand this ... Angular sees/knows content has changed, but instead of updating the view (again) afterwards, it throws an error. I fail to see the logic in this.

Whereever I see these setTimeout / detectchanges things, it feels like a huge code smell, written by people who don't really know what is happening, including myself ofcourse.

It would be nice if a framework would just handle change detection, like vuejs does.

Nice!

Thank you

Still saving lives over two years after the original post - thank you so much!!

Doesn't this just gets rid of the error by always running the change detection twice, while doing nothing about the underlying problem?

Generally this comes if you changes or modify variables that the template is listening to, in your component constructor.

Instead use the AfterViewInit method

Amazing, thanks bro!

Amazing!, thank you!!!

Thank you!!!!!

Thank you!!