Angular で Material Design を使用する

Material Design はGoogleが提唱しているデザインフォーマットです。オープンソースで提供されています。Angular も Google が提唱している　SPA フレームワークですので、Angular から簡単に Material Design を使用してみましょう。

1. Angular Material, Angular CDK, Angular Animations をインストールする。

以下のNPMからサクッとインストールします。

npm install --save @angular/material @angular/cdk @angular/animations

2. Material Icon を表示する方法

2.1. app.module.ts を修正して MatIconModule を import する

以下を先頭に追加します。

    import {MatIconModule} from '@angular/material/icon';

imports の中に MatIconModule を追加します。

    @NgModule({
        ... 省略 ...
      ],
      imports: [
        ... 省略 ...
        MatIconModule
        ... 省略 ...
    })

2.2. index.html の中に Material Icon 用のstylesheet を追加します。

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

2.3. 表示したい箇所にMaterial Icon のHTMLを追加します。

    <mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

こんな風に表示されたら成功です。

3. ボタンを表示する方法

3.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。

    import {MatButtonModule} from '@angular/material/button';

imports の中に MatButtonModule を追加します。

    @NgModule({
        ... 省略 ...
      ],
      imports: [
        ... 省略 ...
        MatButtonModule
        ... 省略 ...
    })

3.2. Material Design のテーマCSS をインポートします。

https://material.angular.io/guide/theming

例えばですが、style.css に以下を追加します。

    @import '@angular/material/prebuilt-themes/indigo-pink.css';

3.3. 表示したい箇所にMaterial Button のHTMLを追加します。

    <button mat-button>Basic</button>
    <button mat-button color="primary">Primary</button>
    <button mat-button color="accent">Accent</button>
    <button mat-button color="warn">Warn</button>
    <button mat-button disabled>Disabled</button>

こんな風に表示されたら成功です。

4. ラジオボタンを表示する方法

4.1. app.module.ts を修正して MatButtonModule を import する

以下を先頭に追加します。

    import {MatRadioModule} from '@angular/material/radio';

imports の中に MatRadioModule を追加します。

    @NgModule({
        ... 省略 ...
      ],
      imports: [
        ... 省略 ...
        MatRadioModule
        ... 省略 ...
    })

4.2. 表示したい箇所にMaterial Button のHTMLを追加します。

    <mat-radio-group aria-label="Select an option">
      <mat-radio-button value="1">Option 1</mat-radio-button>
      <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>

こんな風に表示されたら成功です。