Component not getting displayed while using materi

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 component) 4) heade component.

The problem I am facing is, when I use material theme, I am not able to view child component.

When I dont use material theme, the output I am getting is ,

and When I use material theme , the output is,

I have custom material theme which is defined as follows,

@import '~@angular/material/theming';

@include mat-core();

$my-app-primary: mat-palette($mat-orange, 800,400,200);
$my-app-accent: mat-palette($mat-blue);
$my-app-warn: mat-palette($mat-red);

$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);


@include angular-material-theme($my-app-theme);

And here are the codes,

app.component.html

<router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AppComponent } from './app.component';
import { MatCompModule } from './mat-comp.module';
import { ParkingService } from '../serviceProviders/parkingService';
import { LoginService } from '../serviceProviders/loginservice';
import { LoginComponent } from '../layouts/login/login.component';
import { DashboardComponent } from '../layouts/dashboard/dashboard.component';
import { HomeComponent } from '../layouts/home/home.component';
import { HeaderComponent } from '../layouts/header/header.component';
import { MapComponent } from '../layouts/map/map.component';


const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: '', redirectTo: '/login', pathMatch: 'full'},
  {path: 'dashboard', component: DashboardComponent,
children: [
  {path: 'home', component: HomeComponent},
  {path: 'map', component: MapComponent}
]}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    HeaderComponent,
    MapComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCompModule,
    HttpClientModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  providers: [LoginService, ParkingService],
  bootstrap: [AppComponent]
})
export class AppModule { }

header.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-container>
  </div>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: []
})
export class HeaderComponent implements OnInit {

  constructor( private router: Router) { }

  ngOnInit() {
  }

  onDashboardClicked() {
   // this.router.navigate(['/applayout/dashboard']);
  }
  onMapClicked() {
    this.router.navigate(['/dashboard/map']);
  }
  onHomeClicked() {
    this.router.navigate(['/dashboard/home']);
  }

}

dashboard.component.html,

<app-header></app-header>
<router-outlet></router-outlet>

dashboard.component.ts ,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: []
})
export class DashboardComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

home.component.ts,

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Please help me.

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