Angular Materialのインストールと使い方

プログラミングでロジックを考えるのは得意だけど、フロントエンドは少し苦手だな。簡単にデザインが上手くできないな…

そんな方に朗報です。

Angular materialを使えば、正式サイトのコードをほぼコピペするだけで簡単にタブや可愛いボタン、メニューなどを作ることができます。

本記事を読み終わるころには、Angular materialのセットアップの仕方をマスター出来ます。

※この記事はAngularのバージョン11を使って説明しています。

Angular materialセットアップ手順
実際の使い方
まとめ

Angular materialセットアップ手順

お持ちのエディタのterminalで下のコマンドを入れます。

上のコマンドを入れ、エンターを押すと自動でAngular material/ Component Dev Kit(CDK)/ Angular animationsという3つのパッケージをプロジェクトに入れてくれます。

ng add @angular/material

その後、下の３つの質問を聞かれます。

質問１：Design themes（themeオプション）

Indigo/Pink、Deep purple/ Amber、Pink/ Blue Grey、Purple/ Greenから、themeの色を選べます。

今回、私はIndigoPinkを選択しました。

お好きな色をお好みで選択してください。

ℹ Using package manager: npm
⠋ Searching for compatible package version...(node:8700) ExperimentalWarning: The fs.promises API is experimental
✔ Found compatible package version: @angular/material@11.2.13.
✔ Package information loaded.
✔ Package successfully installed.
? 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

質問２：Global typography stylesをアプリに入れるか

Angular materialが設定しているフォントの種類（Roboto）やフォンサイズ、ラインハイトなどをAngular materialに適用するかの質問です。

こちらもy(yes)にしておいて問題ないです。

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? (y/N)

質問３：アニメーションを可能にするBrowserAnimationModuleを入れるか

この質問は必ずy(yes)にしておきましょう。

BrowserAnimationModuleが入っていないと動作しないAngular materialのデザインが多数あります。

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]
? Set up global Angular Material typography styles? Yes 
? Set up browser animations for Angular Material? (Y/n)

３つの質問に答え終わると下のようにアプリのアップデートが記載されます。

これが出れば、無事にインストール完了です。

UPDATE package.json (1271 bytes)
✔ Packages installed successfully.
UPDATE angular.json (3925 bytes)
UPDATE src/index.html (597 bytes)
UPDATE node_modules/@angular/material/prebuilt-themes/indigo-pink.css (75727 bytes)

追加項目

インストールが終わると自動的に下の５つのファイルをアップデートしてくれます。

万が一、上手く表示されない場合は、下の変更が加わったか確認してみましょう。

追加１：angular.jsonファイル

先ほど選んだindigo-pinkのCSSが追加されました。

angular.json file
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.sass"
            ],

追加２：package.jsonファイル

-@angular/material 、 @angular/cdk、@angular/animationsが追加されました。

package.json file
  "dependencies": {
    "@angular/animations": "~11.2.6",
    "@angular/cdk": "^11.2.13",
    "@angular/material": "^11.2.13",

追加３：index.html

ロボットフォントとマテリアルアイコンが追加されました。

index.html
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

追加４：global.CSSファイル

公式HPにbodyのマージンを削除、htmlとbodyのheight:100%に、アプリのフォントをRobotoに設定されつと記載があります。

私のプロジェクトはSASSにしているからか（?）styles.sassファイルには追加されていませんでした。

追加５：app.module.tsファイル

BrowserAnimationModuleをインポートされ、インポートアレーの中にも追記されました。

app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
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 { CustomPipePipe } from './custom-pipe.pipe';

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

実際の使い方

インストールしたAmgular Materialを使って実際にデザインを作ってみましょう。

手順１：コンポーネントを見つける

Angular materialの公式HPで自分の使いたいコンポーネントのページを見つけます。

コンポーネント一覧はこちらにあります。

今回は、アプリ開発でも良く使うセレクトを作ってみます。

手順２：モジュールをコピーする

ページ内、上の方にOVERVIEW／API／EXAMPLEという３つのタブがあります。

この中からAPIを開きます。

APIのページにAPI reference for Angular Material selectとあり、その下にインポートするコードが書いてるので、コードをコピーします。

import { MatSelectModule } from ‘@angular/material/select’;

手順３：モジュールをインポートする

app.module.tsファイルに先ほどコピーしたコードを貼り付けます。

また、importsアレー内にモジュール名（この場合、MatSelectModule）を追加します。

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
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 { CustomPipePipe } from './custom-pipe.pipe';
//公式HPでコピーしたモジュールをここに貼り付ける
import  { MatSelectModule } from '@angular/material/select';
//今回FormControlを使う為にReactiveFormsModuleも追加
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    CustomPipePipe,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    //モジュールをインポートする
    MatSelectModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

今回はFormControlを使うためにReactiveFormModuleも必要だったので、追加しました。

手順４：実際のHTML／CSS／Typescriptのコードをコピペする

次に公式HPのEXAMPLEのタブを開きます。

ページ内にはSelectを使ったデザイン例が沢山あります。

中から、自分の使いたいデザインを見つけたら、枠内右上にある<>を押します。

するとHTML／CSS／Typescriptのそれぞれのコードが出てくるので、コピーして自分のプロジェクトに貼り付けます。

コンポーネント（Typescript）ファイル
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
})
export class AppComponent {
  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
}

HTMLファイル
<mat-form-field appearance="fill">
  <mat-label>Toppings</mat-label>
  <mat-select [formControl]="toppings" multiple>
    <mat-select-trigger>
      {{toppings.value ? toppings.value[0] : ''}}
      <span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
        (+{{toppings.value.length - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
      </span>
    </mat-select-trigger>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
  </mat-select>
</mat-form-field>

今回は簡単な手順説明のため、HPのコードをそのままコピーしていますが、自分の好みや必要に応じて、CSSやコード、データを書き換えていきましょう。