how open multiple mat bottom sheets at a time in angular material

user_5678296 0
Viewed 786

I have a mat bottom sheet in my angular 8 application which will open on click of a button and I have a link in the bottom sheet which will trigger another mat bottom sheet successfully but the problem is whenever the second mat bottom sheet opens, the first one closes automatically which I don't want. So, can anyone help me how to open multiple bottom sheets at time please.

Thanks in advance!.

angular-material angular
2 Answers
<div ng-controller="BottomSheetExample" class="md-padding" ng-cloak>
  <h2 class="md-title">Usage</h2>
  <p>Multiple Bottom sheets can be displayed by clicking one of the buttons below.  Once shown, it can be
  dismissed by either swiping down or clicking in the shaded area.</p>
  <h2 class="md-title">Actions</h2>
  <p>Use one of the following buttons to display a bottom sheet.</p>
  <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center" >
    <md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet()">Show as List</md-button>
    <md-button flex="50" class="md-primary md-raised" ng-click="showGridBottomSheet()">Show as Grid</md-button>
  </div>

  <div ng-if="alert">
    <br/>
    <b layout="row" layout-align="center center" class="md-padding">
      {{alert}}
    </b>
  </div>
</div>
user_111858250

according to https://material.angular.io/components/bottom-sheet/overview :

The MatBottomSheetRef is a reference to the currently-opened bottom sheet and can be used > to close it or to subscribe to events. Note that only one bottom sheet can be open at a time. Any component contained inside of a bottom sheet can inject the MatBottomSheetRef as well.

what you are trying to achieve is also what i was looking for, then when we found it is too hard, we changed our design. But by theory you can still achieve multiple BottomSheets by using ContainerOverlayRef. Read the documentation about it and see how you go.

user_36469860
Related