AngularといえばGoogle、Googleといえばマテリアルデザイン。
ということで、今回はAngular8で新規にアプリケーションを作って、Angular Materialを導入する手順を説明します。
ちなみに、マテリアルデザインとは、Googleが提唱するデザインフレームワークの一種です。
詳しくはこちらをご覧ください。
それでは、さっそくやってみましょう。
環境
- Angular: 8.2.14
- Angular CLI: 8.3.19
- Node.js: 12.13.0
- Angular Material: 8.2.3
Angular CLIは事前にインストールしておいてください。
手順
以下のような流れで作業します。
- プロジェクト作成
- Angular Materialのセットアップ
- Angular Materialの適用
- Angular Materialでナビゲーションバーを表示
プロジェクト作成
プロジェクトを作成します。
$ ng new MaterialSite
$ cd MaterialSite- Angular Routingのインストール要否を聞かれますが、どちらでも構いません。
- Stylesheet formatは、わかりやすくCSSを選択します。
Angular Materialのセットアップ
Angular Materialをインストールします。
$ ng add @angular/material途中、どのカラーパレットを使うか聞かれるので、お好みで選択しましょう。
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
❯ 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今回は、Deep Purple/Amberを選択します。
HammerJSのセットアップをするか聞かれるので、”Y”のままEnter
Angular Materialのいくつかのコンポーネントに依存関係があります。
? Set up HammerJS for gesture recognition? (Y/n)Browser Animationのセットアップも、”Y”のままEnter
? Set up browser animations for Angular Material? (Y/n)Angular Materialの適用
app.module.tsにToolbarModuleと、MatIconModuleをインポートします。
$ vi src/app/app.module.ts
...
import { MatToolbarModule } from '@angular/material/toolbar';
...
@NgModule({
imports: [
...
MatToolbarModule,
],
})
...app.component.htmlに、ツールバーを実装します。
$ vi src/app/app.component.html<mat-toolbar color="primary">
<span>Site Name</span>
</mat-toolbar>動作確認
サーバーを起動して、画面を確認してみましょう。
$ ng s画面上部に、ツールバーが表示されていれば、Angular Materialが正しく適用できています。
まとめ
今回は、Angular8で作成したアプリケーションに、Angular Materialを導入して、コンポーネントを表示するまでの流れを説明しました。
Angularを使っていて、試しにマテリアルデザインを使ってみたい方は、簡単に試せるかと思います。
参考になれば幸いです。
参考
Angular Material公式ページ
コメント