Component not getting displayed while using material theme

Question

I am not getting what is happening here. I have following components,

1) app.component 2) Dashboard component. 3) Login component 4) Home component ( child of dashboard

Answer 1

The problem is you are using mat-sidenav without mat-sidenav-content, you can even check that your sidenav is taking the whole screen.

The simple solution is you don't need that header component. Simply use that header component code in your dashboard component and put that router-outlet insdie your dashboard componenet mat-sidenav-content tag.

Example:

dashboard.component.html

<div class="page">
  <div>
  <mat-toolbar color="primary" class="toolbar">
  <div>
  <button class="menuButton" mat-icon-button (click)="sidenav.toggle()"><mat-icon>menu</mat-icon></button>
  <span class="companyName">Hello</span>
  </div>
  </mat-toolbar>
 </div>

  <mat-sidenav-container class="sideContainer" fullscreen  autosize style="top: 80px !important;">
    <mat-sidenav #sidenav mode="push" opened="false" class="sideNav">
     <mat-nav-list>
       <button (click)="onDashboardClicked()">Dashboard</button>
        <nav class="menuItems">
          <a routerLink="/login">Login</a>
        </nav>
        <br/>
        <button (click)="onMapClicked()">Map</button>
        <br/>
        <button (click)="onHomeClicked()">Home</button>
   </mat-nav-list>
   </mat-sidenav>
   <mat-sidenav-content>
     <router-outlet></router-outlet>
   </mat-sidenav-content>
  </mat-sidenav-container>
 </div>

change the dashboard.component.ts as per the header.component.ts