Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer

Question

I'm trying to implement the [hasBackdrop]=true on my mat-drawer-container with multiple mat-drawers. My html structure is something like this:

<mat-drawer-container [hasBackdrop]="true">

  <mat-drawer #drawer mode="over">
    <app-side-nav [drawer]="drawer" [infoDrawer]="infoDrawer" [contactDrawer]="contactDrawer" ></app-side-nav>
  </mat-drawer>

  <mat-drawer #infoDrawer mode="over">
    <app-side-info [infoDrawer]="infoDrawer"></app-side-info>
  </mat-drawer>

  <mat-drawer #contactDrawer mode="over"opened='true'>
    <app-side-contact [contactDrawer]="contactDrawer"></app-side-contact>
  </mat-drawer>

  <mat-drawer-content>
    <app-header [drawer]="drawer"></app-header>

    <app-mensagem></app-mensagem>

    <div>
      <router-outlet></router-outlet>
    </div>

    <app-footer></app-footer>
  </mat-drawer-content>
</mat-drawer-container>

With one single drawer the hasBackdrop works perfectly with the click outside the mat-drawer-container colapsing the drawer. But since i added the other two i no longer have the backdrop available.

In the docs it says

@Input() hasBackdrop: any | Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.

Anyone had a similar problem? Should i open a new issue?

Thanks in advance.

ps: bad english, sorry

Answer 1

you can't have multiple drawers in the same position by default the position is start, you can set another drawer in position="end" and that's it.

in your case, side-nav, side-contact, side-info, should go in the same drawer, and you must implement some logic (or routing) to decide what to show in the drawer

PS: you should consider using sidenav instead of drawer

from the doc :

The sidenav components are designed to add side content to a fullscreen app. The drawer component is designed to add side content to a small section of your app.