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

Answer 1

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

Answer 2

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/

Answer 3

In my case, what helped was addin:

constructor(private ref: ChangeDetectorRef){}

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

Answer 4

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