Angular Materialのセットアップ

内容

Angular Material を利用するためのセットアップ方法についてのメモ

セットアップ方法

• ターミナル上で npm install --save @angular/material @angular/cdk @angular/animations と入力。
• BrowserAnimationsModuleをimport

app.module.ts

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

• themeを設定

ここで言うthemeとは、アプリ内で利用するMaterialスタイルのこと。事前に準備されているもの(prebuild)がある。独自にテーマを作成する方法もあるが、そちらは後述。今回はprebuildのテーマを使用。style.css に以下を記述する。

style.css

/* prebuildのテーマは４つ準備されているので好みで選択 */
 @import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
/* @import "~@angular/material/prebuilt-themes/pink-bluegrey"; */
/* @import "~@angular/material/prebuilt-themes/purple-green.css"; */

• 使用するコンポーネントを都度インポートする

app.module.ts

import { MatButtonModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    MatButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 適用されているかを確認

app.component.html

<button mat-raised-button color="primary">ボタン</button>