ホーム » Angular の各種話題 » Angular Material の利用方法

Angular Material のインストール (最終更新: 2019年4月)

この資料は 2019年4月現在のインストール手順を書いたものです。環境設定手順はなくなると何かと不便なので、そのままの形で残しておきます。当サイトの最新版は「Angular Material のインストール」をみてください。

準備. Angular プロジェクトを新規作成する。

$ ng new foo

ここで、Angular Routing には y を入力、スタイルシートは CSS (.css) とします。

$ code foo

Visual Studio Code でプロジェクトを開いたら、ターミナルを開く。

A. Angular Material

1. Material Angular のパッケージをインストールする。

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

2. app.module.ts にモジュールを取り込む。

src/app/app.module.ts に BrowserAnimationsModule を取り込む。

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

また @NgModule 内の imports の中に追加する。

3. Material モジュール取り込み用のモジュールを作成する。

src/app 以下に material.module.ts を作成します。

import { NgModule } from '@angular/core';
import { MatButtonModule, MatInputModule } from '@angular/material';

@NgModule({
    imports: [
        MatButtonModule,
        MatInputModule,
    ],
    exports: [
        MatButtonModule,
        MatInputModule,
    ]
})
export class MaterialModule {}

4. app.module.ts に上で作った material.module.ts を取り込む。

imports に MaterialModule を追加する。

ちなみに、モジュールが複数あるときに ng g コマンドでコンポーネント等を作ろうとすると、複数モジュールがありますよ、というエラーがでます。その場合は --module app.module をオプションにつけて明示的にモジュールを指定してください。

5. style.css にテーマを追加する。

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

6. hammerjs を src/main.ts に取り込む。

import 'hammerjs';

7. Material Icon を取り込む。

index.html の head 部分に次を追加する。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

B. Angular Flex-Layout

Angular Flex-Layout のパッケージをインストールする。
```
npm install --save @angular/flex-layout
```
app.module.ts にモジュールを取り込む。
src/app/app.module.ts に FlexLayoutModule を取り込む。
```
import { FlexLayoutModule } from '@angular/flex-layout';
```
でインポートしたら @NgModule 内の imports の中に追加する。

Angular 8 向けのビルドで no exported member 'ɵNgStyleR2Impl' などのビルドエラーが発生する問題が知られています (2019年5月現在)。

その場合は packages.json でパッケージのバージョンを変えて試す必要があります。ビルドが成功した時のパッケージリストはこちらです。参考にしてください。

  "dependencies": {
    "@angular/cdk": "^7.3.7",
    "@angular/flex-layout": "^7.0.0-beta.24",
    "@angular/material": "^7.3.7",
    "@angular/animations": "^7.2.15",
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },

packages.json を書き換えたら、次のコマンドでモジュールを取り直します。

$ npm install

C. ReactiveFormsModule

src/app/app.module.ts に ReactiveFormsModule を取り込む。
```
import { ReactiveFormsModule } from '@angular/forms';
```
でインポートして @NgModule 内の imports の中に追加する。

D. 動作確認

動作確認は次の通り。 app.component.html に次を追加する。

<form
  class="login"
  fxLayout="column"
  [formGroup]="loginForm"
  (ngSubmit)="onSubmit()">
  <mat-form-field>
    <input type="email" matInput formControlName="email">
    <mat-hint>Enter your email.</mat-hint>
    <mat-error>Email is required.</mat-error>
  </mat-form-field>
  <mat-form-field>
    <input type="password" matInput formControlName="password">
    <mat-hint>Enter your password.</mat-hint>
    <mat-error>Password is required.</mat-error>
  </mat-form-field>
  <button
    type="submit"
    mat-raised-button
    color="primary"
    [disabled]="loginForm.invalid">Login</button>
</form>

app.component.ts に次を追加する。

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  loginForm: FormGroup;

  ngOnInit() {
    this.loginForm = new FormGroup({
      email: new FormControl('', {
        validators: [Validators.required, Validators.email]
      }),
      password: new FormControl('', {
        validators: [Validators.required]
      })
    });
  }

  onSubmit() {
    console.log(this.loginForm);
  }
}

app.component.css に次を追加する。

form.login {
  width: 300px;
}

以上です。開発サーバーの実行は次の通り。

$ ng serve

ホーム » Angular の各種話題 » Angular Material の利用方法