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

Created on 17 Jan 2018 · 9Comments · Source: angular/components

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?

P4 feature

Source

gtranter

👍1

Most helpful comment

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

jamesbarrett95 on 6 Feb 2019

👍3

All 9 comments

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>

mmalerba on 17 Jan 2018

👍2 ❤1

Any idea when this issue will be fix?

adrianlemess on 14 Apr 2018

👍3

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.

mmalerba on 14 Apr 2018

👍3

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

joyanta on 20 May 2018

👍2

Please look into supporting this.

aribrick on 5 Dec 2018

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

jamesbarrett95 on 6 Feb 2019

👍3

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

vijaysirra on 4 Jul 2019

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

mmalerba on 28 May 2020

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._}