Angular Materialとは？Angular公式UIコンポーネントの特徴と使い方！
この記事では、Angularの公式UIコンポーネントである「Angular Material」についてその特徴と使い方を説明する。
Angular Materialは簡単な設定のみでモダンなマテリアルデザインのコンポーネントをアプリで使用できるようにするフレームワーク。
スタイルや機能も簡単にカスタマイズできる事から導入している企業も少なくないはず。
Angularをマスターするのであれば必ず知っておきたいフレームワークだ。
Angular Materialとは？
Angular MaterialはGoogle社によって開発されているAngularのための公式のUIコンポーネント集。
マテリアルデザインはAndroidなどでも採用されているシンプルでモダンなデザイン。
この記事の執筆時点での最新バージョンは12.2.11だ。
Angular Materialは以下のような特徴を持つ。
- 公式フレームワークの安定性
- 日本語を含む様々な言語に対応
- コンポーネントはカスタマイズ可能
Angular Material 公式ホームページ
https://material.angular.io
Angular Materialの公式サイトではすべてのコンポーネントをプレビューすることができる。
まずはAngular Materialのデザインが自分のアプリにマッチするかどうかチェックしてみよう。
サンプルのコードも見ることができるので、使い方はすぐに理解できるだろう。
Angular Materialの使い方
では、Angular Materialの使い方を見ていこう。
Angular Materialのスキーマを取り込む
Angular Materialはデフォルトではプロジェクトに含まれていない。
使用するためにまずはAngular Materialのスキーマを取り込む必要がある。
以下のコマンドを実行しよう。
ng add @angular/materialコマンドの実行中に以下の3点について尋ねられる。
- テーマを4つのプリセットから選択する。⇒ Indigo Pink
- タイポグラフィー設定をするか否か。⇒ yes
- Browser Animationの設定するか否か。⇒ yes
コマンドが終了すると関連するファイルがアップデートされる。
コンポーネントを使用する
Angular Materialのコンポーネントをプロジェクトで使ってみよう。
ここではもっともよく使われるであろう「Button」コンポーネントを例に簡単な使い方を説明する。
どんなコンポーネントがあるか確認したい人はAngular Materialの公式サイトを見てほしい。
Angular Materialのコンポーネントを使用するには、それぞれのコンポーネントに対応したモジュールをapp.module.tsにインポートする必要がある。 MatButtonModuleをapp.module.tsに追加しよう。
それぞれのコンポーネントがどのモジュールに対応しているかは公式サイトで確認できる。
原則的にモジュールは「Mat+コンポーネント名+Module」で命名されている。
buttonを表示したいコンポーネントに以下のコードを追加して、ボタンが表示されるか確認しよう。
<button mat-raised-button>Click me!!</button>問題が無ければ以下の写真のような白いボタンが表示されるはずだ。
「mat-raised-button」はボタンの種類を指定している。
Angular Materialではこういった属性（Attribute）を使うことにより、より目的に合ったコンポーネントを選ぶことができる。
プロパティを使用する
Angular Materialのコンポーネントはそれぞれに固有のプロパティを備えている。
プロパティを使って先ほどのボタンに色を加えてみよう。
button要素にcolor=”primary”を追加する。
<button mat-raised-button color="primary">Click me!!</button>先ほどのボタンの背景が青に変化するはずだ。
primaryとして設定されているカスタムのSCSSファイルを加えることによって変えることもできる。