【Angular7】MaterialのmatStepperNextをコードで制御！ │ Traveler

Materialデザインには「Stepper」と呼ばれるものがあります。

↓こんなやつですね。

stepper

で、このStepperをサインアップの画面に使いたいということで導入したのですが、ステップを進めるのをJavaScript側で制御したいわけです。

ということで今回は、MaterialデザインのStepperをコードで制御する方法を解説します！

■Angular Materialの使い方はこちら

Traveler

【Angular7】Materialデザインの使い方を解説！

https://traveler0401.com/angular-material-tsukaikata/

AngularとMaterialデザインの組み合わせって素晴らしいーー。AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。ということで今回は、AngularでMaterialデザインを使う方法を解説します。僕のプロフィールはこ...

僕のプロフィールはこちら

1. 僕の環境
2. Material Stepperとは
3. Material Stepperの使い方
4. ステップを進める簡単な方法
5. matStepperNextをJavaScriptで制御する方法
6. 参考サイト
7. おすすめ書籍
8. まとめ

僕の環境

OS：Windows10

Angular：7

Material Stepperとは

Material Stepperとは、Materialデザインに含まれるStepperというコンポーネントになります。

以下が公式サイトになります。

■Stepper | Angular Material

URL：「https://material.angular.io/components/stepper/overview」

Material Stepperの使い方

import { MatStepperModule } from '@angular/material/stepper';

1	import { MatStepperModule } from '@angular/material/stepper';

「app.module.ts」に記載します。これで、各コンポーネントで「Material Stepper」が使えるようになります。

import { MatStepper } from '@angular/material/stepper';

1	import { MatStepper } from '@angular/material/stepper';

コンポーネントで「MatStepper」を読み込みます。

ステップを進める簡単な方法

公式サイトにも書かれていますが、ステップを進めるには「matStepperNext」を使います。

また、ステップを戻すには「matStepperPrevious」を使います。

<mat-horizontal-stepper>
  <mat-step>
    ...
    <div>
      <button mat-button matStepperPrevious>Back</button>
      <button mat-button matStepperNext>Next</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

<mat-horizontal-stepper>

<mat-step>

...

<div>

</div>

</mat-step>

</mat-horizontal-stepper>

こんな感じになりますが、このソースコードは結構問題があります。

ステップを進めるにあたって、サーバ側に通信することも良くある話です。というか、ボタン押したら勝手に進むなんていう簡単な使い方はほぼしないはずです。

例えば、進むボタンを押してサーバへ通信し、サーバでエラーが発生した場合、ステップを進めずにエラーメッセージを表示するのが正しい挙動のはずです。

ということは、「matStepperNext」をJavaScript(AngularではTypeScript)で制御する必要が出てくるわけです。

matStepperNextをJavaScriptで制御する方法

<mat-horizontal-stepper #stepper>
  <div>
    <button (click)="goBack(stepper)" type="button">Back</button>
    <button (click)="goForward(stepper)" type="button">Next</button>
  </div>
</mat-horizontal-stepper>

<mat-horizontal-stepper #stepper>

<div>

</div>

</mat-horizontal-stepper>

HTML側です。stepperを関数の引数として渡すことができます。

  /**
   * ステップを戻す
   *
   * @param stepper ステッパー
   */
  public goBack(stepper: MatStepper): void {
    stepper.previous();
  }

  /**
   * ステップを進める
   *
   * @param stepper ステッパー
   */
  public goForward(stepper: MatStepper): void {
    stepper.next();
  }