I have a service to display messages in my application, but the problem is that when more than one event occurs that I need to display the message on the screen, the message is overwritten by the last message to be displayed.
I need a good way of not overlapping my messages and displaying one underneath the other without replacing the others.
I would like it to work the same way a Toast works, displaying one message underneath the other without overlapping.
The way I'm doing it below, only displays one message at a time on the screen.
snack-message.service.ts:
horizontalPosition: MatSnackBarHorizontalPosition = 'center';
verticalPosition: MatSnackBarVerticalPosition = 'top';
constructor(
public snackBar: MatSnackBar){}
showMessage(message: string) {
this.snackBar.open(message, 'Close', {
duration: 5000,
horizontalPosition: this.horizontalPosition,
verticalPosition: this.verticalPosition,
});
}
I think the Snack Bar is only possible to use once.
Check the documentation:
https://material.io/components/snackbars#usage
Only one snackbar may be displayed at a time.