Components: 'mat-sidenav' inside component and not directly in 'mat-sidenav-container' does not resize to 100%

[aldas]

Bug, feature request, or proposal:

When 'mat-sidenav' is wrapped in component under 'mat-sidenav-container' then height 100% is not calculated correctly anymore but If 'mat-sidenav' element is directly under 'mat-sidenav-container' it is ok.

Basically: following breaks height 100%

<mat-sidenav-container>
  <app-sidenav></app-sidenav>

  <div class="content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

but: would work:

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true" class="sidenav">
    <mat-nav-list>
      <mat-list-item *ngFor="let link of links">
        <a matLine routerLink="/{{link}}">{{ link }}</a>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>

  <div class="content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

What is the expected behavior?

height should be 100% for sidenav not be stuck with window initial size

What is the current behavior?

height is stuck to size of window

But if 'mat-sidenav' is in html directly under 'mat-sidenav-container' every thing is ok

What are the steps to reproduce?

Example project: https://github.com/aldas/angular-material2-sidenav-issue-example

Sidenav OK commit: https://github.com/aldas/angular-material2-sidenav-issue-example/commit/ced15fbff94f00099372000b00350d2279bab67b

What is the use-case or motivation for changing an existing behavior?

modularise application menu inside sidenav setup.

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

    "@angular/core": "^5.0.0",
    "@angular/material": "^5.0.0-rc0",

...
    "typescript": "~2.4.2"
    "@angular/cli": "1.5.0",

Chrome latest, FF latest

Is there anything else we should know?

nope

[masterfloda]

Using mat-sidenav in a different component renders it within mat-sidenav-content, probably because that's how angular renders components.

Expected structure:

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

What happens when you put mat-sidenav in a component:

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

Any suggestions on how to fix this would be appreciated.

[aldas]

Atm in my real project I just pulled 'mat-sidenav' up to parent component and modularized just content of 'mat-sidenav' into its own component 'app-sidenav'

so: this works fine.

<mat-sidenav-container>
  <mat-sidenav mode="side" opened="true" class="sidenav">
    <app-sidenav></app-sidenav>
  </mat-sidenav>
  <div class="content">
    <router-outlet></router-outlet>
  </div>
</mat-sidenav-container>

I'm quite new to Angular so I did not know to think about that (some) components/directives have strict parent-child relation and there can not be intermediate elements/components between.

[mmalerba]

<mat-sidenav> should be placed directly inside the <mat-sidenav-container>, so this is working as intended

[colmben]

Just wasted an hour on this, you might to mention in the doco page that wouldn't work if it pushed down to a custom component.

https://material.angular.io/components/sidenav/overview

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}