Angular material Snackbar with multiple actions

Question

Is it possible to have multiple actions within an Angular Material snackbar?

I know it is possible to use your own component for the snackbar.

But for this code, the action is only one action

private snackBar: MatSnackBar;

this.snackBar._openedSnackBarRef.onAction().subscribe(
  () => {
    console.log('action has occurred, but which one?')
  }
);

Answer 1

I am using Angular9 and we have an option to use a custom component inside the SnackBar. Here is the sample code:

Inside callee component:

    openSnackBar(message) {
        this.snackBar.openFromComponent(CustomSnackBarComponent, {
            duration: 5 * 1000,
        });
    }

Custom component:

@Component({
    selector: 'snack-bar-component-example-snack',
    template: `<div class="example-pizza-party">
               <button mat-raised-button (click)="cancel()">Cancel </button>
               <button mat-raised-button (click)="doAction()">View Results </button>
               </div>`,
    styles: [`
      .example-pizza-party {
        color: green;
      }
    `],
  })
  export class CustomSnackBarComponent {

    constructor(private router: Router) { }

    doAction() {
        // you can do some action here
    }

    cancel() {
      // close the snackbar or wirte another action
    }

  }

Refer to the official docs here.

Answer 2

Demo : SnackBar created using Bottom Sheet

I have not found 2 actions working in SnackBars, but implemented a snackBar with 2 actions using BottomSheet Component.

Scenario :
I had same requirement in the project.
Notifications were displayed using snackBar in the whole project, and for one action, its easy to handle using snackBar.

Problem :

• But, there was a requirement of adding 2 or multiple actions in the snackBars as notifications were completely handled through snackBars in the Project.

Solution Achieved :

• Created and styled the BottomSheet in such a manner to replicate the snackbar used in the project.
• Demo Project : https://stackblitz.com/edit/angular-bottomsheet-as-snackbar?file=src%2Fapp%2Fapp.component.html

Opened SnackBar :