【Angular】ヘッダーメニューでサイドナビを表示させる方法

注意：メモ記事です!

ディレクトリ構造

-app
|-shared
|-header
|-sidenav
app.component
app.module

headerコンポーネント

<mat-toolbar>
    <button mat-icon-button class=""  (click)="clickSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <span>ROK dashboard</span>
    <span class="header-spacer"></span>
    <button mat-icon-button>
      <mat-icon>home</mat-icon>
    </button>
    <button mat-icon-button>
      <mat-icon>logout</mat-icon>
    </button>
  </mat-toolbar>

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { RoutingService } from 'src/app/core/services/routing.service';

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
//clicks sidenav and throw event
@Output() sidenavToggle = new EventEmitter();
//get menuList

constructor(
private routingService : RoutingService
) { }

ngOnInit(): void {
}

/**
* Clicks toggle sidenav
*/
clickSidenav(): void{
this.sidenavToggle.emit();
}

/**
* clicks sign out
*/
clickSignOut(): void{

}
}

sidenavコンポーネント

<mat-nav-list>
  <mat-list-item routerLink="" (click)="clickHome()">
    <mat-icon>home</mat-icon>
  </mat-list-item>
  <mat-list-item *ngFor="let pageUrl of menuList">
    <button mat-button routerLink="/{{pageUrl.url}}">{{pageUrl.page}}</button>

  </mat-list-item>
</mat-nav-list>

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { UrlConst,PAGEURLS, PageUrlPair } from 'src/app/pages/constants/url-const';
import { RouterModule, Routes } from '@angular/router';

@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {
@Output() sidenavClose = new EventEmitter();
menuList:PageUrlPair[] = PAGEURLS;
constructor() { }

ngOnInit(): void {
}

/**
* Clicks home
*/
public clickHome(): void {
this.sidenavClose.emit();
}
}

<!-- Sidenav container -->
<mat-sidenav-container>
  <!-- Side navigation -->
  <mat-sidenav #sidenav mode="side" closed>

    <app-sidenav (sidenavClose)="sidenav.close()"></app-sidenav>

  </mat-sidenav>

  <!-- Main Contents -->
  <mat-sidenav-content>
    <!-- Header Contents -->
    <app-header (sidenavToggle)="sidenav.toggle()"></app-header>

    <!-- Main Contents -->
    <router-outlet></router-outlet>
    <!-- Footer Contents -->
    <app-footer></app-footer>
  </mat-sidenav-content>
</mat-sidenav-container>