[Sidenav] Issue when container and sidenav in different components

[ghost]

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 and 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!

[ironstine]

Would also love to see all sidenav 'modes' working when splitting out into different components via transclusion/content-projection.

Currently only 'over' works...

Repro on stackblitz: https://stackblitz.com/edit/angular-material-sidenav-mode

Mode is set to 'push' while showing behaviour of 'over' in /app/components/sidenav.component

The sidenav split out approach is also used by the ngrx team in their example app: https://github.com/ngrx/platform/tree/v4.1.1/example-app

You can reproduce the issue in the example-app by trying to set the mode to 'push' or 'side'.

[LeonBernstein]

According to official docs: "The must be placed as an immediate child of the ."

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.