Angularで開閉メニューを実装する

この記事の目的

Angularでアプリによくある開閉式のメニュー(この名称が正しいのか微妙ですが...)を作成する方法を紹介します。

Angular-materialを利用することで、簡単に実装することが可能です。本記事ではAngular11をベースに実装を行っております。

実装スタート

実装といってもモジュールをインポート、テンプレートを追加していくのみです。

まず、対象のモジュールに下記モジュールをimportしておきます。 また今回は、ヘッダーに開閉メニューボタンを置く為、ヘッダーデザイン用のモジュールも一緒にimportしておきます。

import { MatToolbarModule } from '@angular/material/toolbar'; // ヘッダー用
import { MatMenuModule } from '@angular/material/menu'; // 開閉メニュー用
import { MatIconModule } from '@angular/material/icon'; // アイコン用

テンプレート側では以下のように記載してください。

<mat-toolbar color="primary">
  <span>アプリタイトル</span>
  <span class="spacer"></span>
  <button mat-button [matMenuTriggerFor]="menu">
    <mat-icon>account_circle</mat-icon>
  </button>
  <mat-menu #menu="matMenu">
    <button mat-menu-item>プロフィール</button>
    <button mat-menu-item>ログアウト</button>
  </mat-menu>
</mat-toolbar>

mat-toolbarでヘッダーの部分を作成し、mat-menuを利用することで簡単に開閉メニューを作成することができます。 プロフィール、ログアウトなどの項目にアイコンをつけてあげるとそれっぽくなります！！

最後に...

今回の記事はAngular-materialのドキュメントを参考にさせていただいてます。 https://material.angular.io/components/menu/overview