angularangular2-material

angular 2 sidenavlayout in parent, sidenav in child

I'm working with angular 2 material and I want the sidenav layout in the app.component.html like 

<md-sidenav-layout>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</md-sidenav-layout>

and the side nav whith it's toolbar in outsourced component navbar.component.html

<div class="navbar">
  <md-sidenav #sidenav mode="side" class="app-sidenav">
    <button md-button (click)="sidenav.toggle()">Overview </button>
    <button md-button>Deploy</button>
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>

    <!-- This fills the remaining space of the current row -->
    <span class="navbar-fill-middle-space"></span>

    <button md-button>Login</button>
  </md-toolbar>
</div>

My Problem at the moment is, that the sidnav layout of the parent html isn't recognized by the sidenav of the chield html. Is there any possibility to solve it like this or do i have to take the sidenav with the toggle bar into the parent html. Thank you in advice

Solution

  • The way we did it (and do note angular2-material is still in alpha so it might not be the correct way) is, in your app.component.html do:

    <md-sidenav-layout>
  <md-toolbar color="primary"> ... </md-toolbar>
  <md-sidenav> ... </md-sidenav>
  <div class="sidenav-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

    So anything that is beling to the current route, will be injected into the content area of the sidenav layout.

    Also note we have placed the <md-toolbar> before the <md-sidenav> element, so when sidenav is active, it will go over the toolbar as well, as one would expect from a material-designed app.