components: Opening MdDialog in ngOnInit throws ExpressionChangedAfterItHasBeenCheckedError

I had the same problem here when I tried open the MatDialog:

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 ?

Another workaround is to put the dialog openning inside a setTimeout callback. e.g.:

  ngOnInit() {
    setTimeout(() => this.dialog.open(MyComponent))
  }

Also, openning the dialog in the construct works in my case.

workaround- use Promise.resolve()

Promise.resolve().then(() => { this.$loadingDialog = this.dialog.open(LoaddingDialogComponent, { width: '350px', disableClose: true }); });

I got the same error today and moving the call into constructor or using setTimeout() fixes it. Why is that?

Why is this issue closed?

Closing as this is actually working as expected as noted by it requiring a feature request in @angular/angular.

If angular/angular#15634 is implemented then this request would also be fulfilled here upon release of the feature.

Actually, isn’t there any way to show a clearer error message?

Landed here from googling around. An easy way to fix this if you want a dialog to open after doing some data check when loading a view is just to put it later in the lifecycle (see lifecycle hooks: https://angular.io/guide/lifecycle-hooks ). Works great for me on the latest one; which fit my needs, AfterViewInit (ngAfterViewInit).

Is there an update on this one yet?

@ThomasBurleson have you seen this?

in my case placing open modal in ngAfterViewInit worked

@julianobrasil yes, as I mentioned in the issue report 😃