はじめに
Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。最初のバージョンはAngularJS(AngularJS 1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。
「Material Design」は、Googleが提唱するデザインガイドラインで、Googleのスマートフォンアプリなどで利用されています。本記事で紹介する「Angular Material」は、このMaterial Designに対応したUI部品を提供する、Angular用コンポーネント集です。Angular Materialを利用すれば、AngularのWebページにMaterial Designの外観や挙動を適用できます。
![図1:Angular Materialの公式ページ(https://material.angular.io/)](http://cz-cdn.shoeisha.jp/static/images/article/11516/11516_001_s.png)
本記事では、AngularプロジェクトにAngular Materialを導入して利用する方法と、Angular MaterialのUI部品を利用する例を、サンプルとともに紹介していきます。
対象読者
- AngularのWebページに統一的なデザインを適用したい方
- Googleのアプリのようなデザインを自分のWebページにも導入したい方
- 見栄えの良いWebページを作りたい方
必要な環境
Angularの開発では、一般にTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。
今回は以下の環境で動作を確認しています。Angular MaterialのセレクトボックスがMicrosoft Edgeで正しく表示されない(意図せずブラウザー画面の横幅いっぱいに表示される)ため、本記事ではGoogle Chromeを動作確認に使用します。
-
Windows 10 64bit版
- Angular 7.2.12
- Angular Material 7.3.7
- Angular CLI 7.3.8
- Node.js v10.15.3 64bit版
- Google Chrome 73.0.3683.103
サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「ng serve」コマンドを実行して、Webブラウザーで「http://localhost:4200」を開きます。「ng serve --open」とオプション指定すると、実行時にWebブラウザーを自動で起動してページを表示できます。
Angular Materialの導入と、基本的な利用方法
Angular Materialを導入して利用する基本的な方法を、ツールバー(MatToolbar)を表示する図2のサンプルで説明します。
![図2:Angular Materialのツールバーを表示するサンプル(p001-basic)](http://cz-cdn.shoeisha.jp/static/images/article/11516/11516_002.png)
最初に、リスト1のコマンドを実行して、Angular CLIでAngularのプロジェクトを生成し、Angular Materialを導入します。
ng new p001-basic #...(1) cd p001-basic #...(2) ng add @angular/material #...(3)
(1)でプロジェクトを生成後、(2)でそのフォルダーに移動して、(3)のng addコマンドでAngular Materialを導入します。なお、Angular 7以降では、(3)のコマンド実行時に、テーマカラーなどを対話入力で指定できます。詳細はAngluar 7の紹介記事、連載18回「フレームワークとツールの両面で完成度アップ! 「Angular」バージョン7の新機能」も参考にしてください。
次に、Angular Materialのモジュールをインポートします。Webページのルートモジュール定義ファイル(app.module.ts)で、ツールバーのモジュール(MatToolbarModule)を、リスト2(1)で参照して、(2)でインポートします。Angular Materialのモジュールは機能ごとに分かれているので、必要な機能のモジュールをインポートします。
import { MatToolbarModule } from '@angular/material'; // 参照 ...(1) (略) @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, MatToolbarModule // インポート ...(2) ], (略) }) export class AppModule { }
最後に、Webページのルートコンポーネントで、Angular Materialのツールバーコンポーネントを表す<mat-toolbar>を、テンプレートにリスト3の通り記述します。
<mat-toolbar color="primary"> <span>はじめてのAngular Material</span> </mat-toolbar>
<mat-toolbar>のcolor属性に指定されている「primary」は、Angular Materialのテーマカラーのうち、メインとなる色を表します。テーマカラーにはprimary以外にaccent(アクセント色)、warn(エラーを表す色)があります。