【Angular】Angular Materialの導入
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
Angularアプリで簡単にレスポンシブデザインを対応させるために、Angular Materialを導入することにしました。
Angular 8.2.14
Angular Material 8.2.3
内容
Angular Materialとは？
Material Designに対応したUI部品を提供するAngular用のコンポーネント集です。
AngularアプリにMaterial Designの見た目や挙動を適用できるようになります。
ちなみにMaterial Designとは、Googleが提唱するデザインガイドラインのことです。
導入方法
非常に簡単です。
Angularアプリがあるフォルダで以下のコマンドを実行。
$ ng add @angular/material
テーマを選択します。URLを開くと、そのテーマの配色になっているAngular MaterialのHPが表示されます。
? Choose a prebuilt theme name, or "custom" for a custom theme:
❯ 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
HammerJSをセットアップするか聞かれます。便利なのでYでいいでしょう。
? Set up HammerJS for gesture recognition? (Y/n)
BrowserAnimationsModuleをAngular Materialにセットアップするか聞かれます。こちらも便利なのでYでいいでしょう。
? Set up browser animations for Angular Material? (Y/n)
これでAngularアプリにAngular Materialが導入されました。
使用方法
ルートモジュールのapp.module.tsにAngular Materialのモジュールをインポートします。
そして、使用したいデザインのコンポーネントをcomponent.htmlに記述します。
デザインはこちらを参考にしてください。
Angular Material UI component library
今後に向けて
データ連携の復習をします！
今はまだデザインに時間を割かない。
参考
素晴らしい記事に感謝いたします。
Angular Material UI component library Getting started
Angular Material UI component library Components
「Angular Material」で、「Angular」のWebページにMaterial Designを導入しよう (1/2)：CodeZine（コードジン）
