Angular: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Question

What's wrong? Getting the following error in console:

AboutComponent.html:1 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: undefined'. Current value: 'null: [object Object]'.

import { AfterViewInit, Component} from '@angular/core';

export class Test {

}

@Component({
  selector: 'app-about',
  template: `
    {{asd}}
  `
})
export class AboutComponent implements AfterViewInit {

  asd: Test;

  ngAfterViewInit(): void {
    this.asd = new Test();
  }
}

There is a discussion about this here: https://github.com/angular/angular/issues/14748 — DeborahK, Dec 13 '18 at 17:40
This is a good reference as well: https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4 — DeborahK, Dec 13 '18 at 17:43
Follow this... https://stackoverflow.com/questions/34364880/expression-has-changed-after-it-was-checked — Kalanka, Jun 20 '21 at 14:51

score 21 · Answer 1 · answered Dec 13 '18 at 18:17

You can also force change detection after you make a change within ngAfterViewInit() as such:

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

export class Test {

}

@Component({
  selector: 'app-about',
  template: `
    {{asd}}
  `
})
export class AboutComponent implements AfterViewInit {

  asd: Test;

  constructor(
    private cdRef: ChangeDetectorRef   
  ) { }

  ngAfterViewInit(): void {
    this.asd = new Test();
    this.cdRef.detectChanges(); 
  }
}

score 9 · Answer 2 · edited Dec 22 '20 at 16:52

9

Some Lifecycle hooks are called before the rendering part when Angular processes bindings and some are called after that

Ref:https://blog.angularindepth.com/a-gentle-introduction-into-change-detection-in-angular-33f9ffff6f10

The error is due to the Angular call this ngAfterViewInit method once all the binding processed. To get rid this error you can do the following

Move your code inside ngOnInit lifecycle hook

ngOnInit() {
    this.data = new Test()
}

Or

Wrap your code inside setTimeout()

 ngAfterViewInit() {
    setTimeout(()=>this.data = new Test(),0)
  }

Great Article about the same issue: https://blog.angular-university.io/angular-debugging/

edited Dec 22 '20 at 16:52

Sampath

58,546
53
279
406

answered Dec 13 '18 at 18:07

Chellappan வ

18,942
3
21
52

This answer guided me to solution in my App where @ViewChild('form', { static: false}) form: FormGroup; had to be changed to {static: true}. Thanks. – Mirosław Apr 29 '20 at 10:07
You are welcom @Mirosław – Chellappan வ Apr 29 '20 at 13:00

score 0 · Answer 3 · answered Feb 20 '22 at 15:51

0

In my case, what helped was addin:

constructor(private ref: ChangeDetectorRef){}

  ngAfterContentChecked() {
    this.ref.detectChanges();
  }

answered Feb 20 '22 at 15:51

Martin Staufcik

6,954
4
36
58

score 0 · Answer 4 · answered Apr 24 '22 at 14:07

I faced this issue while working on Loader subscription with MatSpinner

I fixed it by adding

ngAfterViewInit() {
    this.loading$ = this.loader.loading$;
    this.cdRef.detectChanges();
  }

This piece of code has to be added to the TS file in which you have defined the template., not in any submodule or files below a module if the Template refered is app.component.html where we have a spinnner, the TS file where it should be present is app.component.ts

Angular: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

4 Answers4