Angular material basic snackbar without button
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;}
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;
}