Snackbar.open inside ngOnInit produces an ExpressionChangedAfterItHasBeenCheckedError error

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Calling snackbarService.open() should not produce errors, even if the DI has just instantiated the snackbar service.

What is the current behavior?

When calling snackbarService.open() inside ngOnInit, an error is thrown:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '@state: undefined'. Current value: '@state: visible-bottom'. 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 ?

What are the steps to reproduce?

Just add a call to snackbar service’s open, inside ngOnInit https://stackblitz.com/edit/angular-3ma9xb

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

Angular 6.0.2, material 6.0.0-rc14

Is there anything else we should know?

I’m guessing that when you inject the service at the constructor, the snackbar div gets appended to the DOM, and if open() gets called too quickly, the change detection is still in progress for the div’s attributes.

[rojasjandro89]

That’s an even dirtier hack 🤓…

[raidenfreeman]

@splitt3r Yes, that’s how I worked around it (small setTimeout). But I guess it feels hacky. 🤷‍♂️