Components: Opening MdDialog in ngOnInit throws ExpressionChangedAfterItHasBeenCheckedError

[fredrikredflag]

Bug:

When opening a MdDialog inside ngOnInit of a component a ExpressionChangedAfterItHasBeenCheckedError error is thrown. If the MdDialog is opened in the constructor of a component no error is thrown.

Temp workaround is to open the MdDialog inside a setTimeout(() => this._dialog.open(MyComponent))

What are the steps to reproduce?

http://plnkr.co/edit/aE6LNzRVYnKB01bMej87?p=preview

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

This only seems occur with material-beta.7 and angular 4.2.0+.

Works fine with material-beta.7 and angular 4.1.3.

[fredrikredflag]

@julianobrasil yes, as I mentioned in the issue report :)

[danwulff]

Seeing the same thing.

@angular/cdk: 2.0.0-beta.8
@angular/material2: 2.0.0-beta.8
@angular/_____: 4.2.6

Here is a minimal repo duplicating the error: https://github.com/danwulff/mdDialog_error

Copy and run in terminal:
git clone https://github.com/danwulff/mdDialog_error && cd mdDialog_error/ && npm install && ng serve

Using the silly timeout workaround for now. Probably related to this: https://github.com/angular/angular/issues/17572

[johnpapa]

Is there an update on this one yet?

@ThomasBurleson have you seen this?

[willshowell]

It looks like https://github.com/angular/angular/issues/15634 covers it

[josephperrott]

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

If https://github.com/angular/angular/issues/15634 is implemented then this request would also be fulfilled here upon release of the feature.

[polotto]

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 ?

[ro31337]

@josephperrott please re-open this issue

[toddwseattle]

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).

[vrbagal]

workaround- use Promise.resolve()

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

[odahcam]

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.

[uladzimir-miadzinski]

in my case placing open modal in ngAfterViewInit worked

[odahcam]

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?

[wottpal]

Why is this issue closed?

[tuanbs]

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

[odahcam]

It is all about change detection, and is working as intended, all we can do is ask for a better error message guys.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}