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.

Share:
11,774

Related videos on Youtube

Luiz Ricardo Cardoso
Author by

Luiz Ricardo Cardoso

Updated on June 04, 2022

Comments

  • Luiz Ricardo Cardoso
    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
    Luiz Ricardo Cardoso over 5 years
    This 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
    Rafael Ferreira over 5 years
    U 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
    Luiz Ricardo Cardoso over 5 years
    I 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!