Components: [Sidenav] Issue when container and sidenav in different components

Created on 12 Dec 2017 · 4Comments · Source: angular/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 and and it break the css rules.

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

Angular Material 5.0.1

P4 feature

Source

ghost

👍8

Most helpful comment

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>

mmalerba on 10 Jan 2018

👍3

All 4 comments

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>

mmalerba on 10 Jan 2018

👍3

I would also love to see this split-up!