CODEWITHSUNDEEP
angular
Denis Kildishev
Denis Kildishev

Reputation: 759

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

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

Upvotes: 28

Views: 58053

Answers (5)

Chellappan வ
Chellappan வ

Reputation: 27303

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/

Upvotes: 14

Stefana
Stefana

Reputation: 31

What solved it for me is:

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

Your component must implement: AfterContentChecked and ChangeDetectorRef

Upvotes: 3

Vignesh Ravichandran
Vignesh Ravichandran

Reputation: 189

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

Upvotes: 0

Martin Staufcik
Martin Staufcik

Reputation: 9490

In my case, what helped was addin:

constructor(private ref: ChangeDetectorRef){}

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

Upvotes: 4

Jackson Vaughan
Jackson Vaughan

Reputation: 662

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

Upvotes: 38

Related Questions