Menu
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,
});
}
266
Frequency. Only one snackbar may be displayed at a time.
Snackbars appear without warning, and don't require user interaction. They automatically disappear from the screen after a minimum of four seconds, and a maximum of ten seconds.
Import the snackBarService and inject it inside the constructor of the component, in which you want to use the Snackbar. This will create an instance of the service say snackBService. Now call the openSnackBar function wherever it is required, with the help of snackBService.
Snackbar in android is a new widget introduced with the Material Design library as a replacement of a Toast. Android Snackbar is light-weight widget and they are used to show messages in the bottom of the application with swiping enabled. Snackbar android widget may contain an optional action button.
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.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
