概要

Angular アプリに Angular Material を導入するための備忘録。

前提

Angular Material： v15.0.3
Angular： v15.0.0

Angular Material とは

Angular Material（アンギュラー・マテリアル）とは、Angular アプリに「マテリアルデザイン」を導入するための公式ライブラリ。

Angular以外の技術でも利用可能な、マテリアルデザインのライブラリは別途存在するが、それを Angular で作られたアプリに最適化されたライブラリとして公式が用意している。導入も、ng コマンド一発で簡単に導入が可能。

「マテリアルデザイン」とは？

マテリアルデザインとは、Google が提唱する「見やすく、直感的に操作できるWebページ・サービス」を実現するためのデザイン理論で、YouTube をはじめとする多くの Google 製 Web サービスや Android OS 等にも実際に利用されているデザインです。

パッケージ導入

Angular プロジェクトの直下で、以下のコマンドを実行する

ng add @angular/material

対話形式で各種設定について質問されます（下記の回答は一例なので、ご自身の都合に合わせてください）

# パッケージを導入して良いか改めて確認
The package @angular/material@15.0.3 will be installed and executed.
Would you like to proceed? (Y/n) 
  # -> Y を入力して Enter キー

# アプリ全体のカラーテーマをどうするか選ぶ
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ] 
  Custom 
  # -> 好きなカラーセットを選択して Enter キー


# 文字の強調表示の設定をグローバルにするかどうかを確認
? Set up global Angular Material typography styles? (y/N) 
  # -> y を入力して Enter キー

# アニメーションモジュールを含めるか選択
? Include the Angular animations module? (Use arrow keys)
❯ Include and enable animations 
  Include, but disable animations 
  Do not include 
  # -> 「含める」を選択して Enter キー

# 以下の表示がされれば導入完了
✔ Packages installed successfully.
UPDATE src/app/app.module.ts (502 bytes)
UPDATE angular.json (3073 bytes)
UPDATE src/index.html (585 bytes)
UPDATE src/styles.scss (181 bytes)

動作確認

ローカルサーバ起動

npm run start

Webブラウザで localhost:4200 にアクセスし、導入前と変わらない画面が表示されればOK

サーバは Control ＋ C （Windows なら Ctrl ＋ C ）で停止可能

画面にコンポーネントを追加してみる（Button）

では、実際にマテリアルデザインの部品を画面に追加する流れを説明する。

公式ページの「Components」というナビゲーションをクリックすると以下のように様々な部品が表示される。

今回はこの中から、「Button」 コンポーネントを選んで導入してみる。
選択してみると、詳細ページでサンプルが表示されている。

まず、導入するコンポーネントを利用するために、「API」タブを選択し、最上部に表示されている部分で、必要なインポートモジュールを確認する。
（import { xxxxxModule } from '@angular/material/xxxxx';）

モジュールの追加

必要なインポート文を確認したら、アプリのモジュール管理ファイル（app.module.ts）に、以下の様に２箇所追加する。

src/app/app.module.ts

  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 { MatButtonModule } from '@angular/material/button'; // 追加

  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      BrowserAnimationsModule,
+     MatButtonModule, // 追加
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }

コンポーネントの追加

実際に部品を追加するには、コンポーネント詳細ページの「OVERVIEW」タブを選択し、サンプル表示の右上にある < > アイコンをクリックすると、HTML/CSS/TS ファイルにどんな記述をすればよいのかコードが確認できる。

ここで表示されているものが、そのままサンプル表示に連動しているので、必要な記述だけをコピペするだけで、自分の開発するアプリの画面に再現できる。

ごく単純に、空白ページ状態のトップ表示コンポーネントに「Raised Button」を Primary カラーを追加する。

src/app/app.component.html

<div>
  <!-- ボタン追加 -->
  <button mat-raised-button color="primary">Primary</button>
</div>

ボタンの追加は以上で完了。

表示確認

ローカルサーバを起動し、画面表示してみると以下のようにボタンのみ表示される。
クリックすると、エフェクトが発生するが、まだ処理は実装していないので、押しても何も起きない。

このように、「コンポーネント詳細ページでインポート確認」👉「サンプルコードを、目的の画面のソースに追記」、とするだけでマテリアルデザインの部品が画面に追加できる。

あとは、様々なコンポーネントを組み合わせて画面にどんどん導入し、アプリデザインを充実させましょう！