angulartypescriptangular-materialsnackbar

How to show several snackbar without overlapping

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,
    });
  }
Solution

  • 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.