Issue when mat-sidenav-container and mat-sidenav in different components

Question

I have separated out mat-sidenav-container and mat-sidenav into two different components. When I have my sidenav in two components like this, the mode "side" is not working anymore. The mode switch to "over". When I have all in the same component, it's working.

<app-layout>
 <app-sidenav></app-sidenav>
 <router-outlet></router-outlet>
</app-layout>

app-layout contains mat-sidenav-container component and app-sidenav contains mat-sidenav component

During runtime,

<app-sidenav></app-sidenav>
<router-outlet></router-outlet>

gets wrapped by mat-sidenav-content.

Answer 1

Wrapping <mat-drawer> or <mat-sidenav> in a custom component is not currently supported and won't work. See https://stackoverflow.com/a/48308330/9226213 .