Angular 5 Material Snackbar

The issue I'm having is that, the snackbar component, when initialised, is attached outside of cdk-global-overlay-wrapper (Which is within cdk-overlay-container) Which makes it vis

Solution 1:

I had a similar issue where MatSnackBar existed outside the Angular zone which breaks it's interaction with Angular's lifecycle hooks.

This was only happenng when the snackBar.open() callstack was originally exicuted by a 3rd party service (in my case SignalR).

I fixed it by wrapping the snackBar.open() command in a NgZone.run() task within my component. This allows you to reenter the Angular zone from a task that was exicuted from outside.

example:

import { Component, NgZone } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss']
})
export class ExampleComponent {

  constructor( private snackBar: MatSnackBar, private zone: NgZone ) { }

  showSnackBar() {
    this.zone.run(() => {
      this.snackBar.open("message", "action");
    });
  }
}

This is not exactly the problem you described, but it may help.