Angular-Materialを利用して開閉メニューを実装

3433 ワード
Angular フロント 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'; // アイコン用

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

header.component.ts
<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