[Sidenav] Issue when container and sidenav in different components

Bug, feature request, or proposal:

I have the template like this: <mat-sidenav-container class="sidenav-container"> <my-component></my-component> ... </mat-sidenav-container>

<my-component> is: <mat-sidenav #leftSidenav class="sidenav" mode="side" [opened]="true"> ... </mat-sidenav>

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.

I think it’s due to a another tag between <mat-sidenav-container> and <mat-sidenav> and it break the css rules.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular Material 5.0.1

[mmalerba]

This use case is not currently supported, instead you would do something like this:

<mat-sidenav-container>
  <mat-sidenav>
    <my-sidenav></my-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
    <my-content></my-content>
  </mat-sidenav-content>
</mat-sidenav-container>

[rutgervd]

I would also love to see this split-up!