More than 5 years have passed since last update.

Angular Materialのsidenavをコンポーネントとして実装する

Posted at 2018-10-10

この記事で書くこと

Angular MaterialのsidenavをAngularプロジェクトに実装する方法を説明します。

既にAngularプロジェクトを作成されていると仮定して話を進めます。
プロジェクトフォルダにて以下のコマンドを入力してインストールを実行します。

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

以下のコマンドを続けて入力して、プロジェクトにAngular Materialライブラリを追加します。

ng add @angular/material

このコマンドを実行することで、Angular Materialライブラリの依存関係をプロジェクトに追加してくれます。

以下のコマンドを実行することで、Angular Materialのsidenavをコンポーネントとして生成して追加します。

ng generate @angular/material:material-nav --name=test-sidenav

test-sidenavの部分はコンポーネントの名前なので、好きな名前にしてください。
ng generate @angular/material:material-navは、Angular 6から実行できるようになりました。

コンポーネントを作成したらHTMLにコンポーネントを埋め込みます。

(例)app.component.html

<app-test-sidenav></app-test-sidenav>

上記を埋め込んで試しにng serveを行いローカル環境で確認すると、このようなバーが表示されます。

デフォルトでレスポンシブデザインとなっているので、PCディスプレイ等の横幅の大きな画面では以下のようになります。

Angular Materialが用意しているテンプレートを使用することが出来ます。
使用するには、style.cssに以下の一行を追加します。

style.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

テンプレートは以下の4種類あり、好きなものを選ぶ事が出来ます。