How to use multiple mat-drawer inside mat-drawer-container?

2k views Asked by At

After using multiple drawer inside a mat-drawer-container the backdrop is disabled & drawer opening one upon the other. Below is the structure.

<mat-drawer-container autosize (backdropClick)="closeSidenav()" >
  <mat-drawer #globalSearch [class.side-drawer]="!searchService.drawerWidth" position="end" disableClose [class.full-drawer]="searchService.drawerWidth">
    <app-global-search></app-global-search>
    <app-global-bookmark ></app-global-bookmark>
    <router-outlet></router-outlet>
  </mat-drawer>
  <mat-drawer #globalbookmark [class.side-drawer]="!bookmarkService.sidenavWidth" position="end" disableClose [class.full-drawer]="bookmarkService.sidenavWidth">
    <app-global-bookmark></app-global-bookmark>
    <router-outlet></router-outlet>
  </mat-drawer>
  <mat-drawer-content>
    <router-outlet></router-outlet>
  </mat-drawer-content>
</mat-drawer-container>
0

There are 0 answers