Undo Action from SnackBar Component

Question

I need to create some undo logic from the snackBar custom component. I am facing challnge in calling the undo logic function from the custom snackBar Component.

SnackBar Service :

showSnackbar(mes: string){
    let snackRef=this.snackBar.openFromComponent(SnakebarComponent, {
              duration : 2000,
               data: mes
                   });
  }

SnackBar Component:

constructor(@Inject(MAT_SNACK_BAR_DATA) public data: any) { }
  message = this.data;

  ngOnInit() {
  }

  onClick(){
     // Undo Button of custom component
  }

Component calling snackBar

this._utility.showSnackbar('Saved Successfull!!');

Please help me out in achieving the same.

Answer 1

I suppose you're probably looking for this method dismissWithAction(). In your function, call dismissWithAction() on the Snackbar's reference which closes the snackbar.

From the official documentation:

dismissWithAction: Marks the snackbar action clicked - Angular Material - MatSnackBarRef API

Example:

// ...
export class CustomSnackBar {
  constructor(private snackBarRef: MatSnackBarRef<CustomSnackBar>){ }

  onActionBtnClick() {
    this.snackBarRef.dismissWithAction();
  }
}

The code that opened the snackbar:

let snackBarRef = this.snackBar.openFromComponent(CustomSnackBar);
snackBarRef.onAction().subscribe(() => {
  console.log('Action button clicked!');
})