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.

Answer 2

JiBi is right here, "you can't have multiple drawers in the same position".

the simplest way to have multiple types of content or sections displayed inside a mat-drawer or mat-side-nav is to just wrap the sections in an ng-container and pass the context of the section on click so that its renderable with an *ngIf

something like this

<mat-drawer-container class="container" autosize>

  <mat-drawer #drawer class="sidenav" mode="over">
    <ng-container *ngIf="sideMenuContext === 'section-1'">
      <!-- section 1 here -->
    </ng-container>
    <ng-container *ngIf="sideMenuContext === 'section-2'">
      <!-- section 2 here -->        
    </ng-container>
  </mat-drawer>

  <div class="sidenav-content">
    <button type="button" mat-button (click)="drawer.toggle(); sideMenuContext = 'section-1'">
      section 1
    </button>
    <button type="button" mat-button (click)="drawer.toggle(); sideMenuContext = 'section-2'">
      section 2
    </button>
    <!-- main content here-->
  </div>

</mat-drawer-container>