【Angular】Angular Materialでのハンバーガーメニュー

$ ng new hamburger-menu

$ ng add @angular/material

$ ng generate component header
$ ng generate component side-menu
$ ng generate component content
$ ng generate component page-a
$ ng generate component page-b

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ContentComponent } from './content/content.component';
import { HeaderComponent } from './header/header.component';
import { SideMenuComponent } from './side-menu/side-menu.component';
import { PageAComponent } from './page-a/page-a.component';
import { PageBComponent } from './page-b/page-b.component';

import { MatToolbarModule } from '@angular/material/toolbar'; // 追加
import { MatIconModule } from '@angular/material/icon';       // 追加
import { MatSidenavModule } from '@angular/material/sidenav'; // 追加
import { MatListModule } from '@angular/material/list';       // 追加

@NgModule({
  declarations: [
    AppComponent,
    ContentComponent,
    HeaderComponent,
    SideMenuComponent,
    PageAComponent,
    PageBComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,   // 追加
    MatIconModule,      // 追加
    MatSidenavModule,   // 追加
    MatListModule       // 追加
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component, NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { ContentComponent } from './content/content.component'; // 追加
import { PageAComponent } from './page-a/page-a.component';     // 追加
import { PageBComponent } from './page-b/page-b.component';     // 追加

const routes: Routes = [  // 更新
  { path: '', component: ContentComponent },
  { path: 'a', component: PageAComponent },
  { path: 'b', component: PageBComponent },

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<div class="example-container">

  <!-- ヘッダー-->
  <app-header (sidenavToggled)="sidenav.toggle()" [sidenav]="sidenav"></app-header>

  <mat-sidenav-container class="example-sidenav-container">

    <!-- メインコンテンツ -->
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>

    <!-- サイトメニュー -->
    <mat-sidenav mode="over" #sidenav>
      <app-side-menu></app-side-menu>
    </mat-sidenav>

  </mat-sidenav-container>

</div>

.example-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.example-sidenav-container {
  flex: 1;
}

import { Component, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'humbuger-menu';

  @ViewChild('sidenav')
  private sidenav!: MatSidenav

  constructor(
    private readonly _router: Router,
  ) {
    this._router.events.subscribe(() => {
      this.sidenav.close();
    });
  }
}

<mat-nav-list>
  <a mat-list-item *ngFor="let link of naviLinks" routerLink="{{link.location}}">
    {{link.label}}</a>
</mat-nav-list>

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

@Component({
  selector: 'app-side-menu',
  templateUrl: './side-menu.component.html',
  styleUrls: ['./side-menu.component.css']
})
export class SideMenuComponent {
  naviLinks = [
    { location: '', label: 'top' },
    { location: 'a', label: 'page a' },
    { location: 'b', label: 'page b' }
  ];
}

<mat-toolbar color="primary">
  <mat-icon mat-icon-button class="header-icon" id="header-icon" (click)="toggle()">menu</mat-icon>
  <span>Angular Sample</span>
</mat-toolbar>

.header-icon {
  margin-right: 20px;
}

import { Component, Output, Input, EventEmitter } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

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

  @Output() sidenavToggled = new EventEmitter<{}>();
  @Input() sidenav!: MatSidenav;

  private icons = {
    opened: 'close',
    closed: 'menu'
  }

  toggle(): void {
    this.sidenavToggled.emit({});
  }

  private subscribeToSidenav() {
    const icon = document.querySelector('#header-icon') as HTMLElement;

    this.sidenav.openedStart.subscribe(() => {
      icon.innerHTML = this.icons.opened;
    });

    this.sidenav.closedStart.subscribe(() => {
      icon.innerHTML = this.icons.closed;
    });
  }

  ngOnInit() {
    this.subscribeToSidenav();
  }
}

$ ng serve