how to pass observable from angular bottomsheet to parent component

1
votes

I need to pass data from angular material bottomsheet to its parent component.

Like we have [mat-dialog-close] directive in angular material dialog component where we can pass data from dialog to parent like as mentioned in https://material.angular.io/components/dialog/api#MatDialogClose

dialog html:

<button [mat-dialog-close]="'dataWhichNeedsToBePassed'" cdkFocusInitial>Ok</button>

and recieve in parent component as:

dialogRef.afterClosed().subscribe(result => {
  console.log(result); //dataWhichNeedsToBePassed
});

similarly, I need to pass data from bottomsheet to parent component(from where bottomsheet has been called).

Looks like there is no predefined directive present in https://material.angular.io/components/bottom-sheet/api

what could be the best solution here.

2
angularangular-material

2 Answers

0
votes

you can use it in the same way as mat dialog

this._bottomSheet.open(BottomSheetOverviewExampleSheet)
.afterDismissed().subscribe((result) => {
   console.log(result);
   console.log('Bottom sheet has been dismissed.');
 });

example : stackblitz

0
votes

I got my answer from .dismiss() function. Just need to pass data from this dismiss function

bottomsheet.html:

<button (click)="confirmDelete()">Delete<button>

bottomsheetComponent:

confirmDelete(): void {
  this._bottomSheetRef.dismiss('Deleted');
  event.preventDefault();
}

parent Component:

MatBottomSheetRef.afterDismissed().subscribe(result => {
  console.log('bottomsheet was closed');
  console.log(result); //Deleted
});