feat(sidenav): allow sidenav to be placed in a separate component

[gtranter]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

Right sidenav in over mode shows backdrop when open

What is the current behavior?

Backdrop is not shown. DOM structure is incorrect - mat-sidenav is inside mat-sidenav-content.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-fxp7dt

A custom component that has mat-sidenav-container, mat-sidenav (start/left), plus ng-content slots for the main content, left sidenav content, and another mat-sidenav.

The right side nav drawer opens and closes but the backdrop isn't drawn, and therefore the click-out close behavior is missing. DOM structure is messed up - the second sidenav is placed inside mat-sidenav-content.

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

v5

[mmalerba]

The sidenav currently doesn't support this style of usage, instead of putting the mat-sidenav in a separate component you can do something like this:

<mat-sidenav-container>
  <mat-sidenav side="end">
    <ng-content select="my-sidenav-content"></ng-content>
  </mat-sidenav>
  <ng-content select="my-main-content"></ng-content>
</mat-sidenav-container>

[adrianlemess]

Any idea when this issue will be fix?

[mmalerba]

A number of components have open issues similar to this. It's something that Angular itself should ideally have better support for. Until then we probably won't implement it because it would make the components more complex and difficult to maintain.

[joyanta]

yeah i have been banging my head with this
kept thinking I have done something wrong.

[aribrick]

Please look into supporting this.

[jamesbarrett95]

Also suffered with this problem. Tried to put the mat-sidenav into a separate component however it prevented the sidenav from rendering.

[vijaysirra]

the side navbar is working but the shadow part is not..?
I am using side nave in a common component and using the event emitter for parent-child interaction

[mmalerba]

This is a limitation of Angular's content projection. angular/angular#37319 has been filed to hopefully improve some of the short-comings

[angular-automatic-lock-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.}