Components: Snackbar wrongly positioned if opened from global error handler

[mzernetsch]

Bug, feature request, or proposal:

I use a global error handler in my app which shows a snackbar to the user if a certain type of exception is beeing thrown.
If the exception originates from an async function (in my case a promise handler after a http request), the snackbar will be rendered at a wrong position.
The snackbar will only correct its position if the user triggers the change detection (click, mousemove, etc..).

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-td5qwb

1. Define a global error handler which shows a snackbar.
2. Throw an (uncaught) exception from an async function.

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

@angular/core 6.0.7
@angular/material 6.3.2
Chrome 69
Windows 7

Is there anything else we should know?

My current workaround is to show an empty snackbar and manually trigger a change detection cycle before showing the actual snackbar:

try {
  this.snackBar.open("");
  this.snackBar.dismiss();
  this.applicationRef.tick();
} catch (error) {}

this.snackBar.open("MESSAGE");

[josephperrott]

Closing as duplicate of #7233

[mzernetsch]

Found a solution for my problem and just wanted to post it here so maybe it could help others in the same situation in the future.

The NgZone service allows to execute code within the angular zone. So if i use the NgZone.run method to execute the MatSnackBar.open everything works as expected:
https://stackblitz.com/edit/angular-material2-issue-ldsygb?file=app/global-error-handler.ts

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