title: Snackbar position wrong when use errorhandler in angular 5 and material
body: <p>I have custom global error handler</p>
  
  <pre><code>@Injectable()
  export class GlobalErrorHandler implements ErrorHandler {
      constructor(private injector: Injector) {
      }
  
      handleError(err: any): void {
          var route = this.injector.get(Router);
          var snackBar = this.injector.get(MatSnackBar);
          console.log(err);
  
          if (err instanceof HttpErrorResponse) {
              var message = ErrorMessages.get(err.status);
  
              if (route.url.toLowerCase() !== '/login' &amp;&amp; err.status === 401) {
                  route.navigateByUrl('/login');
              }
  
              if (message.length &gt; 0) {
                  snackBar.open(message, "x", { duration: 5000, horizontalPosition: "center", verticalPosition: "bottom" });
              }
          }
      }
  }
  </code></pre>
  
  <p>The position of snackbar is <strong>not</strong> at vertically bottom and horizontally centered.</p>
  
  <p><a href="https://i.stack.imgur.com/JTEQ9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JTEQ9.png" alt="enter image description here"></a></p>
  
  <p>If I use snackbar in http interceptor, it is displayed correctly</p>
  
  <pre><code>@Injectable()
  export class AuthHttpInterceptor implements HttpInterceptor {
      constructor(private loginService: LoginService, private route: Router, private snackBar: MatSnackBar) {
      }
  
      intercept(req: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpSentEvent | HttpHeaderResponse | HttpProgressEvent | HttpResponse&lt;any&gt; | HttpUserEvent&lt;any&gt;&gt; {
          var url = this.route.url;
          var isAuthenticated = this.loginService.isAuthenticated();
  
          var authHeader = ``;
          if (isAuthenticated) {
              authHeader = `Bearer ${this.loginService.getToken()}`;
          }
  
          req = req.clone({
              setHeaders: {
                  Authorization: authHeader,
                  ApiKey: "aaa"
              }
          });
  
          return next.handle(req)
              .do((ev: HttpEvent&lt;any&gt;) =&gt; {
                  if (ev instanceof HttpResponse) {
  
                  }
              }, (err: any) =&gt; {
                  if (err instanceof HttpErrorResponse) {
                      var message = ErrorMessages.get(err.status);
  
                      if (this.route.url.toLowerCase() !== '/login' &amp;&amp; err.status === 401) {
                          this.route.navigateByUrl('/login');
                      }
  
                      if (message.length &gt; 0) {
                          this.snackBar.open(message, "x", { duration: 5000, horizontalPosition: "center", verticalPosition: "bottom" });
                      }
                  }
              });
      }
  }
  </code></pre>
  
  <p>Why ?</p>