0

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>
shreya bhattacharya
  • 1
  • 1
  • 1
    Does this answer your question? [Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer](https://stackoverflow.com/questions/66546974/angular-material-mat-drawer-container-not-showing-backdrop-with-multiple-mat-dr) – TotallyNewb Jul 29 '21 at 09:24

0 Answers0