Mat-container id causes error: ExpressionChangedAfterItHasBeenCheckedError

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Mat-dialog opening up without warnings/error

What is the current behavior?

When a modal is open the following error is thrown:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'id: undefined'. Current value: 'id: alert-dialog'. 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 ?

The error appears both when setting the id and when leaving it undefined so that an id is generated automatically.

What are the steps to reproduce?

StackBlitz repo, check the console after the modal appears: https://stackblitz.com/edit/angular-material2-issue-mat-container-id

What is the use-case or motivation for changing an existing behavior?

ExpressionChangedAfterItHasBeenCheckedError should not be thrown

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

Error showing both with Angular 5.2.x and Angular/material 5.2.4, and with the latest v. 6 beta x as shown in the StackBlitz example.

[julianobrasil]

Have you tried calling your service method from inside a setTimeout()? Apparently, you’re generating the component too soon, before angular has finished it’s change detection cycle after the host component initialization. This is just a guess, I’m not sure about it. Try this: setTimeout(() => this.modalService.showAlert())

[ilDon]

@julianobrasil you are right, adding the timeout solves it. I’ve updated the example with two versions of the same modal, one with and one without the timeout, to show the difference.

Not sure if that should be fixed however, as calling a dialog withing ngOnInit might make sense in certain situations. Anyways in my case I’m calling it after an async check, so I’m good 😃