title: Sidenav and toolbar not appearing in new component in angular 4
body: <p>I am trying to use mat toolbar and side nav in my angular application. I have a component called app-layout which has both toolbar and side nav, here is the code,</p>
  
  <pre><code>&lt;div class="yaanapage"&gt;
    &lt;mat-toolbar color="primary" class="toolbar"&gt;
    &lt;button mat-icon-button (click)="sidenav.toggle()"&gt;&lt;mat-icon&gt;menu&lt;/mat-icon&gt;&lt;/button&gt;
    &lt;span&gt;YAANA-&lt;/span&gt;
    &lt;/mat-toolbar&gt;
  
    &lt;mat-sidenav-container fullscreen  autosize style="top: 80px !important;"&gt;
      &lt;mat-sidenav #sidenav mode="push" opened="false" class="sideNav"&gt;
        &lt;mat-nav-list&gt;
          &lt;mat-list-item (click)="onDashboardClicked()"&gt;Dashboard&lt;/mat-list-item&gt;
          &lt;a&gt;&lt;mat-list-item&gt;Incidents&lt;/mat-list-item&gt;&lt;/a&gt;
          &lt;a&gt;&lt;mat-list-item&gt;Users&lt;/mat-list-item&gt;&lt;/a&gt;
      &lt;/mat-nav-list&gt;
      &lt;/mat-sidenav&gt;
      &lt;mat-sidenav-content &gt;
        &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>It displays the toolbar and side nav, now on side nav, I have different components namely dashboard, users etc.
  Now when I click on dashboard, the dashboard view is replaced in  <strong></strong> . But it is not happening like that, the complete side nav and toolbar are not getting displayed, only dashboard view is displayed.
  The dashboard view is,</p>
  
  <pre><code>&lt;mat-form-field&gt;
     &lt;mat-select placeholder="Choose location" (change)="onChange($event)" (ngModel)="yaanaServiceLocations"&gt;
      &lt;mat-option *ngFor="let location of yaanaServiceLocations" [value]="location"&gt;
        {{ location.areaName }}
      &lt;/mat-option&gt;
     &lt;/mat-select&gt;
    &lt;/mat-form-field&gt;
      &lt;agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom"&gt;
          &lt;agm-marker *ngFor="let marker of coordinates; let i = index" 
          [iconUrl]="icon" 
          [latitude]="marker.latitude" 
          [longitude]="marker.longitude"
          [markerClickable]="true"
          (markerClick)="markerClicked(marker.latitude,marker.longitude)"&gt;
          &lt;agm-snazzy-info-window [closeWhenOthersOpen]="true" [maxHeight]="300" [maxWidth]="1400"
          [backgroundColor]="'orange'" [padding]="'20px'"&gt;
            &lt;ng-template&gt;
              &lt;mat-card&gt;{{ pLocationId }}  {{ pLocationName }}&lt;/mat-card&gt;&lt;br/&gt;
                &lt;mat-grid-list cols="12" rowHeight="100px" (ngModel)="pCycle"&gt;
                  &lt;mat-grid-tile [colspan]="4" [rowspan]="2" *ngFor="let cycle of pCycle; let i = index" [style.background]="orange"
                  [style.padding-right]="'50px'" [style.background]="'white'"&gt;
                      &lt;mat-grid-tile-header [style.height]="20"&gt;{{i+1}}&lt;/mat-grid-tile-header&gt;
                    &lt;div [style.background]="orange"&gt;
                      &lt;i class="material-icons"&gt;motorcycle&lt;/i&gt;
                      &lt;span [style.color]="white" &gt;{{cycle.qrCode}}&lt;/span&gt;&lt;br/&gt;
                      &lt;br/&gt;
                      &lt;i class="material-icons"&gt;battery_alert&lt;/i&gt;
                      &lt;span&gt;{{ cycle.batteryLevel }}&lt;/span&gt;
  
                    &lt;/div&gt;
                    &lt;mat-grid-tile-footer [style.background]="yellow"&gt;
                      &lt;button mat-mini-fab (click)="showDirection(cycle.latitude, cycle.longitude)"&gt;
                        &lt;mat-icon&gt;navigation&lt;/mat-icon&gt;
                      &lt;/button&gt;
                    &lt;/mat-grid-tile-footer&gt;
                  &lt;/mat-grid-tile&gt;
                  &lt;/mat-grid-list&gt;
            &lt;/ng-template&gt;
  
          &lt;/agm-snazzy-info-window&gt;
          &lt;agm-direction *ngIf="dir" [origin]="dir.origin" [destination]="dir.destination" [visible]="show"&gt;&lt;/agm-direction&gt;
      &lt;/agm-marker&gt;
      &lt;div ng-show="showInfo" class="InfoWindow"&gt;
          &lt;h2&gt; I am InfoWindow&lt;/h2&gt;
        &lt;/div&gt;
      &lt;/agm-map&gt;
  </code></pre>
  
  <p>The routing module has the following code,</p>
  
  <pre><code>const routes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },
    { path: 'login', component: LoginComponent },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent},
    {
      path: 'applayout', component: AppLayoutComponent
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, {useHash: false })],
    exports: [RouterModule]
  })
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;div [class]="theme"&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please correct me to display both toolbar and side nav in new components also.</p>