title: angular 2 sidenavlayout in parent, sidenav in child
body: <p>I'm working with angular 2 material and I want the sidenav layout in the app.component.html like </p>
  
  <pre><code>&lt;md-sidenav-layout&gt;
  &lt;app-navbar&gt;&lt;/app-navbar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/md-sidenav-layout&gt;
  </code></pre>
  
  <p>and the side nav whith it's toolbar in outsourced component navbar.component.html</p>
  
  <pre><code>&lt;div class="navbar"&gt;
    &lt;md-sidenav #sidenav mode="side" class="app-sidenav"&gt;
      &lt;button md-button (click)="sidenav.toggle()"&gt;Overview &lt;/button&gt;
      &lt;button md-button&gt;Deploy&lt;/button&gt;
    &lt;/md-sidenav&gt;
  
    &lt;md-toolbar color="primary"&gt;
      &lt;button class="app-icon-button" (click)="sidenav.toggle()"&gt;
        &lt;i class="material-icons app-toolbar-menu"&gt;menu&lt;/i&gt;
      &lt;/button&gt;
  
      &lt;!-- This fills the remaining space of the current row --&gt;
      &lt;span class="navbar-fill-middle-space"&gt;&lt;/span&gt;
  
      &lt;button md-button&gt;Login&lt;/button&gt;
    &lt;/md-toolbar&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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</p>