How to show several snackbar without overlapping
11,774
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.
Related videos on Youtube
Author by
Luiz Ricardo Cardoso
Updated on June 04, 2022Comments
-
Luiz Ricardo Cardoso over 1 year
Can I display multiple messages on the screen without overlapping others with snackBar?
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, }); }
-
Luiz Ricardo Cardoso over 5 yearsThis is a problem for me ... because in a single screen can take several actions and need to notify the user of the actions that occur ... my project makes full use of Angular Material ...
-
Rafael Ferreira over 5 yearsU can use something like a dialog material.angular.io/components/dialog/overview and use with setTimeOut to close, or use other library to show alerts. github.com/flauc/angular2-notifications What do you think?
-
Luiz Ricardo Cardoso over 5 yearsI have been interested in
angular2-notifications
, it has an interesting look and I think it will match the face of my application ... I will use SnackBar on other occasions ... thanks for the tip!