Angular Material Sidenav inside custom component doesn't render right sidenav properly

1
votes

I'm having a problem using a mat-sidenav with position="end" inside a mat-sidenav-container that is part of a custom component. The custom component is essentially the mat-sidenav-container, the left side mat-sidenav, plus ng-content slots for the left sidenav content, page content, and an optional right mat-sidenav.

Sample: https://stackblitz.com/edit/angular-fxp7dt

The problem is that the right sidenav backdrop does not display. A DOM inspection shows that the right mat-sidenav is added inside the mat-content element which is probably why the backdrop is missing. If the same kind of layout is set up without a custom component for the mat-sidenav-container, the right side mat-sidenav is a sibling of mat-content and the other mat-sidenav.

Can anybody see what I might be doing wrong? Or does this seem like a bug in Angular Material?

Thanks.

1
angular-material2

1 Answers

4
votes

According to https://github.com/angular/material2/issues/9438, this usage isn't supported. The workaround is to to include the second mat-sidenav element in the custom component and provide just the content for it instead of the mat-sidenav itself. This kind of thing:

<mat-sidenav-container>
    <mat-sidenav #sidenavStart>
        <ng-content select="[sidenavStartContent]"></ng-content>
    </mat-sidenav>
    <ng-content></ng-content>
    <mat-sidenav #sidenavEnd position="end">
        <ng-content select="[sidenavEndContent]"></ng-content>
    </mat-sidenav>
</mat-sidenav-container>