Angular Material のインストール

ここでは Angular Material を新規 Angular プロジェクトに組み込む手順をまとめて記載します。

Angular のプロジェクトを作って、Angular Material を組み込んで、Flex Layout も組み込んで・・・というのは、 いつもいつも決まり切った手順なので、参考にしてください。

また、ここでは Angular Flex Layout やフォーム (リアクティブフォーム) を取り込む方法も紹介します。

Material Angular, Flex Layout 及び リアクティブフォームを使うための始まりの手順は次の通りです。

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

$ ng new foo

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

$ code foo

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

2. Angular Material のインストール

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

ng add @angular/material

このコマンドの中で次のことを聞かれます。

• UI テーマを選ぶ。(Indigo/Pink などを選ぶ)
• HammerJS をインストールするかどうか。(Y を選択してインストール)
• Browser Animation をインストールするかどうか。(Y を選択してインストール)

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

次のコマンドで src/app 以下に material.module.ts が作成されます。

ng generate module material --flat

ファイルの中身は次のようにしておきます。

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

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

app.module.ts に material.module.ts を取り込む

app.module.ts 内の imports に MaterialModule を追加します。

3. Angular Flex-Layout のインストール

次のコマンドで Angular Flex-Layout のパッケージをインストールします。

npm install --save @angular/flex-layout

src/app/app.module.ts に FlexLayoutModule を取り込みます。

import { FlexLayoutModule } from '@angular/flex-layout';

として、FlexLayoutModule をインポートしたら @NgModule 内の imports の中に FlexLayoutModule を追加する。

error TS1086: An accessor cannot be declared in an ambient context.

  "@angular/flex-layout": "^8.0.0-beta.27",

4. ReactiveFormsModule の取り込み

src/app/app.module.ts に ReactiveFormsModule を取り込みます。

import { ReactiveFormsModule } from '@angular/forms';

でインポートして @NgModule 内の imports の中に追加する。

5. 動作確認

動作確認は次の通り。

app.component.html を次のようにします。

<div fxLayout="row" fxLayoutAlign="center">
  <form class="login" fxLayout="column" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
    <mat-form-field>
      <input type="email" matInput formControlName="email" placeholder="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" placeholder="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>
</div>
<router-outlet></router-outlet>

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 {
  title = 'foo';
  loginForm: FormGroup;

  ngOnInit(): void {
    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 {
  margin: 1rem;
  width: 300px;
}

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

$ ng serve

以上で、ブラウザから http://localhost:4200/ を要求することで、ログインフォームのようなものが表示されるはずです。