1

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

Gustavo Scarpellini
  • 35
  • 1
  • 6

2 Answers2

2

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.

JiBi
  • 378
  • 1
  • 6
  • I just switched to `mat-sidenav-container`, `mat-sidenav` and `mat-sidenav-contend`. All three sidenavs are working with animations an everything. They overlap each other the way i wanted but i still dont get the backDrop. When i set the `opened="true"` on the `mat-sidenav` it works! i tried switching the variable through the TS file using the sidenav as a input and activating it's sidenav.toggle() function and switching the open variable to true but it i got nothing. – Gustavo Scarpellini Mar 09 '21 at 18:13
  • What I said about having only one drawer by position is still valid for sidenav, you should see warning or error for having more than one sidenav – JiBi Mar 09 '21 at 18:55
  • Indeed, tried everything. Thanks for your reply mate! – Gustavo Scarpellini Mar 10 '21 at 01:14
0

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>
Nik
  • 1
  • 1