Angular material basic snackbar without button

Question

So Angular Material has two main ways of calling a SnackBar. The one way is where you call a basic default SnackBar:

snackbar.open('Message archived', 'Undo', {
  duration: 3000
});

The other way is where you call a component as a SnackBar:

snackbar.openFromComponent(MessageArchivedComponent, {
  data: 'some data'
});

Now my question is, how do I call the basic one (without the use of a component) but without the 'Undo' button. I can do this:

snackBar.open('Message archived');

But then how do I adjust the duration and all the other properties?

https://material.angular.io/components/snack-bar/overview

Answer 1

Try this.

snackbar.open('Message archived', '', {
  duration: 3000,
  extraClasses :['test']
});

add styles to test class so that the text will be aligned.

If extraClasses is not working, use panelClass instead

CSS class.

.test .mat-simple-snackbar{justify-content: center;}

Answer 2

Update 2020

The accepted answer seems not to be correct anymore. If someone stumples upon the same problem, here is what works for me:

Create the snackbar with the panelClass property as normally.

// xy.component.ts

this.snackBar.open('Message', '', {
    duration: 3000,
    panelClass: ['simple-snack-bar']
}

Since the custom CSS gets applied to the snack bar container , you have to select the Angular Material snack bar class to override the style.

/* 
styles.css - if you don't want to use ::ng-deep (what is not recomended),
then you are forced to put your styles in the global scope
*/

.simple-snack-bar .mat-simple-snackbar {
  justify-content: center;
}