Components: Mat-container id causes error: ExpressionChangedAfterItHasBeenCheckedError

[ilDon]

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

[crisbeto]

Closing the issue since there isn't much we can do about this, aside from wrapping everything in a timeout on our end.

[AhHa45]

I have wrapped everything in setTimeout and it works as long as I have the dev tools opened.
When I close it, it stays open, even though the afterClosed() Observable is emitting a value after the close...

[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._}