Angular Material のインストールガイド

はじめに

Angular MaterialをAngular5系でインストールする手順をざっくりまとめてみた。
公式ガイドに沿っているけど、必要なさそうな部分はカットしてまとめている。
今回はAngular CLI 1.5.0 で検証。

Angular Materialの導入

プロジェクト作成

Angular CLIでプロジェクトを作成
作ったプロジェクトフォルダに移動

ng new sample-app
cd sample-app

ライブラリをnpmでインストール

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

モジュールのインポート

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButtonModule, MatCardModule, MatInputModule, MatToolbarModule } from '@angular/material';
    
  @NgModule({
  ...
    imports: [
      ...
      BrowserAnimationsModule,
      MatButtonModule,
      MatCardModule,
      MatInputModule,
      MatToolbarModule,
     ...

    ],

※Angular Materialで利用するモジュールを一つ一つ選択する点に注意。
他にもMatCheckboxModule, MatRadioModule などたくさんある。

CSSテーマの設定

styles.css

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

テーマファイルはデフォルトで以下のものが存在するのでお好みで。

• deeppurple-amber.css
• indigo-pink.css
• pink-bluegrey.css
• purple-green.css

hammerjsのインポート

main.ts

import 'hammerjs';

アイコンを利用できるようにする

index.html

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

アイコンは必要な場合のみでOK。
でも、なぜここだけ直接Web上にあるものを参照するのだろう。。。

なにはともあれ、ここまででインストールは完了。