KB)本連載では、Webアプリケーションフレームワーク「Angular」の活用方法を、サンプルとともに紹介しています。前回は、Angularの要素を操作するディレクティブの自作方法を説明しました。Material」を紹介していきます。選択できるサイドメニューを表示ダイアログを表示まとめ参考資料はじめにAngularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。1)と呼ばれていましたが、バージョン2で全面的に刷新され、以降、おおむね半年に1回アップデートされています。Design」は、Googleが提唱するデザインガイドラインで、Googleのスマートフォンアプリなどで利用されています。Designに対応したUI部品を提供する、Angular用コンポーネント集です。Designの外観や挙動を適用できます。MaterialのUI部品を利用する例を、サンプルとともに紹介していきます。必要な環境Angularの開発では、一般にTypeScript(変換してJavaScriptを生成する、いわゆるAltJS言語)が利用されます。本記事のサンプルコードもTypeScriptで記述しています。今回は以下の環境で動作を確認しています。Chromeを動作確認に使用します。serve」コマンドを実行して、Webブラウザーで「http://localhost:4200」を開きます。--open」とオプション指定すると、実行時にWebブラウザーを自動で起動してページを表示できます。Materialを導入して利用する基本的な方法を、ツールバー(MatToolbar)を表示する図2のサンプルで説明します。Materialを導入します。Materialを導入します。7以降では、(3)のコマンド実行時に、テーマカラーなどを対話入力で指定できます。「Angular」バージョン7の新機能」も参考にしてください。Materialのモジュールをインポートします。Webページのルートモジュール定義ファイル(app.module.ts)で、ツールバーのモジュール(MatToolbarModule)を、リスト2(1)で参照して、(2)でインポートします。Materialのモジュールは機能ごとに分かれているので、必要な機能のモジュールをインポートします。Materialのツールバーコンポーネントを表す<mat-toolbar>を、テンプレートにリスト3の通り記述します。Materialのテーマカラーのうち、メインとなる色を表します。テーマカラーにはprimary以外にaccent(アクセント色)、warn(エラーを表す色)があります。