[SOLVED] Mat Dialog Error in Angular Component ExpressionChangedAfterItHasBeenCheckedError

Mat Dialog Error in Angular Component ExpressionChangedAfterItHasBeenCheckedError

I am using Angular Material with Angular 6 where it is like on ngOnInit I have to display content if condition is correct.

I have Dialog Module using which I am displaying Dialog

if (!this.checkforRestriction()) {
  this.loadContent(this.ReferenceID);
} else {
  this.dialogService.okmessage('', dialogMessage);
}

I am getting this error.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'id: undefined'. Current value: 'id: mat-dialog-0'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?
    at viewDebugError (core.js:8445)

Kindly suggest what is wrong ?

Solution

It's hard to tell what's causing the problem without knowing a lot of details about all the invoked functions. However, ExpressionChangedAfterItHasBeenCheckedError can most likely be fixed by doing the following:

try moving the code into ngAfterViewInit lifecycle hook,
try wrapping the code inside the setTimeout.

Finally, read Everything you need to know about the ExpressionChangedAfterItHasBeenCheckedError error. It should give you a better idea about the error you are facing.