How can I position Position MatSnackBar module in Angular?
You can determine the verticalPosition: MatSnackBarVerticalPosition
as specified by the docs
ts:
openSnackBar(message: string, action: string) {
this.snackBar.open(message, action, {
duration: 2000,
// here specify the position
verticalPosition: 'top'
});
}
Demo
To position the snackbar use position values
this.snackBar.open(message.text, action, {
duration: this.timeOut,
verticalPosition: 'bottom', // 'top' | 'bottom'
horizontalPosition: 'end', //'start' | 'center' | 'end' | 'left' | 'right'
panelClass: ['red-snackbar'],
});
and to change color, in your style.css define the red-snackbar:
.red-snackbar{
background-color: rgb(153, 50, 50);
color:lightgoldenrodyellow;
}
https://www.coditty.com/code/angular-material-display-multiple-snackbars-messages-in-sequence