[Angular入門] Angular5 への Angular Materialの導入方法!

モダンなサイトを作る上で使い勝手のいい便利な素材がたくさんあるのが、

Angular Material😉

今回はその導入方法を紹介していきます。

この様な素材が使えます。Angular Material Sample

注意:バージョンについて

使っているAngularなどのバージョンによって正常に動作するかどうか変わってきます。

私が使っているAngularのバージョンは5.2です。

Angular Materialのバージョンは5.2.4です。

このバージョンでの正常な動作を確認しています。

2018/03/24時点で動作することを確認していますが、あまりにも月日が経っていると参考にならないこともありますのでご注意ください。

では、導入していきます。

プロジェクト作成

まずは、プロジェクトを作成します。

今作成中のプロジェクトに導入を考えていたとしても、テスト用のプロジェクトを作成し、思い通り動作するか確認したほうがいいでしょう。

うまくいかず既存のプロジェクトがごちゃごちゃすることもあるので。

では、ディレクトリを適宜移動し、次のコマンドを実行します。

ng new test-material

test-materialというプロジェクトを新しく作成しました。

次のコマンドを実行して、念の為、正常に作成できたか確認します。

ng serve -o

ブラウザが自動的に開き、下のようなサイトが表示されればOKです。

見慣れたAngularプロジェクトがデフォルト状態で表示されるページですね。

では、次はAngular Materialです。

Angular Material導入

では、プロジェクトを作成したので、

Angular Materialを導入していきたいと思います。

公式サイトを参考に進めていきます。

Angular Material・Angular CDK

まず、Angular MaterialAngular CDKをインストールします。

コマンドラインツールのnpmを使って、パッケージをインストールしていきます。

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

最新版:スナップショットビルド

マスターからの最新の変更を含むスナップショットビルドも利用できます。このスナップショットビルドは安定したものではなく、リリース間で壊れる可能性があることに注意してください。

こちらは今回使用しません。安定版を使っていきます。

この前は、このスナップショットビルドを使って、

エラーになって痛い目にあいました。一応対処法がありますので参考までに記載。

[Angular5] Angular Materialが導入できない!?だったらpackage.jsonをいじろう! – まんくつ 

初心者は安定版がおすすめです。

Angular animations

続いて、Angular Animationsのインストールです。

一部のAngular Materialコンポーネントは、より高度な トランジション を実行できるように、Angular Animationsモジュールに依存します。

Angular Animationsを使用したAngular Materialのアニメーションをアプリで動作させたい場合は、angular / animationsモジュールをインストールし、アプリにBrowserAnimationsModuleを含める必要があります。

Angular Animationsインストールコマンドは次のとおりです。

npm install --save @angular/animations
注意
angular / animationsは、まだすべてのブラウザでサポートされていないWebAnimation APIを使用します。これらのブラウザでAngular Materialコンポーネントアニメーションをサポートするには、 ポリフィル を含める必要があります。

ただ、chromeで表示できればいいなどそこまでこだわりがないなら気にする必要はありません。

では、インストールしたのでモジュールをインポートします。

app.module.ts

BrowserAnimationsModuleではなく、NoopAnimationsModuleを

インポートする方法もあるようです。

参考:angular – What’s the difference between BrowserAnimationsModule and NoopAnimationsModule? – Stack Overflow

参考先の解説によるとこの二つの違いは、

  • BrowserAnimationsModule:アニメーション動作する
  • NoopAnimationsModule:アニメーション動作しない

なので、だいぶ違います。

Angular Materialを入れたいけど、アニメーションはいらないとか、

アニメーションは読み込み重くなるから切りたいとかで、

NoopAnimationsModuleを使います。

どっちかは入れないとエラーになるので。

NoopAnimationsModuleを入れるときは、

さっきのコードのBrowserAnimationsModuleを二箇所、

NoopAnimationsModuleに変えればOKです。

コンポーネントモジュールをインポート

使用するAngular MaterialコンポーネントごとにNgModuleをインポートします。

  • ボタン素材を使いたいなら、MatButtonModule、
  • チェックボックス素材を使いたいなら、MatCheckboxModule

ということです。

コードとしては次のようになります。

app.module.ts

CustomMaterialModuleを作る

多くのAngular Materialモジュールをインポートして、

いくつもの素材を使いたいときは、インポートのコードが多くなり、見づらくなるので、

Angular Material用のモジュールを作るほうがいいでしょう。

例えば、CustomMaterialModuleというモジュールを作成して、

app.module.tsにCustomMaterialModuleを読み込ませてみるということになります。

やってみましょう。

ng g module CustomMaterial

このコマンドで、Angular Material用のモジュールを作成します。

コードは次のとおりです。

custom-material.module.ts

app.module.ts

このように、Angular Material用のモジュールに素材のモジュールをインポート、

そしてエクスポートし、Angular Material用のモジュール自体を、

app.module.tsに読み込ませます。

ただ、コードが見づらくなるときはこちらのほうがいいですが、

今回のように2つのモジュールだけ使いたいなら分けなくてもいいでしょう。

がっつりAngular Materialを使うなら分ける方法がおすすめです。

どちらの方法を使用する場合でも、NgModuleのインポート順序が重要です。BrowserModuleの後にAngular Materialモジュールをインポートしてください。

Angular Materialテーマ

アプリケーションにコアスタイルとテーマスタイルをすべて適用するには、テーマを含める必要があります。

いくつか用意されているテーマの中の一つをstyles.cssに追加すればOKです。( Angular CLIを使用している場合)

テーマは4つ用意されています。参考リンク:Theming Angular Material | Angular Material

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

違いを知りたい方は次のリンクを参考にしてくささい。

[Angular入門] Angular5 への Angular Materialの導入方法! – まんくつ

今回は「indigo-pink.css」を使いますが別のテーマにしたいときは、下のコードの「indigo-pink.css」を別の名前に変えればOKです。

styles.css

Angular CLIを使用していない場合は、index.htmlの要素を使用して、事前作成されたテーマを含めることができます。

index.html

どちらか一方でOKです。

ジェスチャー有効化

一部のコンポーネント(mat-slide-toggle, mat-slider, matTooltip)は、HammerJSに依存した、タッチジェスチャー機能を有します。そのため、これらのコンポーネントを完全に機能させるには、HammerJSをアプリケーションに読み込ませる必要があります。

npm経由でインストールするには、次のコマンドを使用します。

npm install --save hammerjs

そして、インストール後、アプリの エントリポイント (src / main.tsなど)にインポートします。

次のコードをmain.tsに加えます。

import 'hammerjs';
hammerjs”: “2.0.8”にて正常動作確認。

マテリアルアイコン

次は、Angular Materialのアイコンを導入します。

Angular Materialデザインアイコンのmat-iconコンポーネントを使用する場合は、index.htmlにアイコンフォントを読み込みます。

index.html

次のようなアイコンが使えるようになります。参考:Material icons – Material Design

SystemJSの設定

SystemJSを使用している場合、いくつかやることがあるようです。

私は使っていないので割愛します。

SystemJSってなに?と思う方は使っていないのでご安心を!

動作確認

では、導入が完了したので、実際にAngular Materialを使ってみましょう。

次のサイトに飛び、サンプルをコピーしましょう。

TSはコピペしなくていいです。なくても動きます。

Button | Angular Material

ただ、buttonのサンプルで、mat-iconを使っているので、

MatIconModuleをAngular Material用のモジュールに追加しなくてはエラーになります。

Angular Materialのサンプルには、例えばボタンだったらボタンだけ、

というわけではなく他のモジュールが必要なことが多々あります。

その時は、エラーになっているmat-〇〇をグーグル検索します。

すると、おそらくトップにヒットするので、そのページのAPIを開き、

必要なモジュールをインポートします。

要約
  1. mat-〇〇が見つかりません(エラー)
  2. mat-〇〇をグーグル検索
  3. 〇〇 | Angular Materialというページを開く
  4. APIのimportコードを読み込ませる

これでエラー回避できます。

正常に動作すれば次のように表示されます。

無事、導入確認できました。

おまけ:hammerJS導入確認

hammerJSの導入確認もしたいという方向けです。

mat-slide-toggle, mat-slider, matTooltipを使わないのであればしなくてもいいでしょう。ここでは一応しておきます。

Sliderを実装して、hammerJSの動作確認をおこないます。

Slider | Angular Material

先程と同様に、サンプルをコピペします。

今回はTSもコピペしますが、気をつけるのは、

次の4行以外をコピペすることです。

  • selector: ‘app-root’,
  • templateUrl: ‘./app.component.html’,
  • styleUrls: [‘./app.component.css’],
  • export class AppComponent {

これらを上書きするとあちこち参照先の名前を変えなくてはいけませんので、

変えないようにしましょう。それ以外をコピペでOKです。

また、MatModule以外にも、次の3つを加える必要があるので、

先ほど紹介した方法で、自分でインポートコードを探してみましょう。

  • MatCardModule
  • MatFormFieldModule
  • MatInputModule

それと、ngModelを使っているので、FormsModuleも必要です。

正常に動作すれば次のようになります。

そして、次のmain.tsのコードをコメントアウトしてみましょう。

import ‘hammerjs’;

次のように動作します。


先ほどと違って、クリックしながら移動してくれなくなります。

ただ、クリックすればその場所に移動するので使えないわけではありません。

このように、hammerJSはタッチジェスチャーの動きを追従を可能にします。

おまけ:テーマごとの違い

今回使用したindigo-pink.css以外は、

センス次第で使い方がありそうですが、

当分はindigo-pink.cssでいいかなって感じです。

indigo-pink.css

deeppurple-amber.css

pink-bluegrey.css

purple-green.css

何も使わない

終わりに

やっぱり、いくら簡単そうな導入方法だろうとしっかりと全部約したほうがいいですね。スナップショットビルドを知らずに使っていて痛い目みました。

今回は安定版を導入できたので新しいサイト作成に活かそうと思います。

それではすてきなAngularライフを👋