Angular Materialでmat-horizontal-stepperのステップをプログラム的に移動する方法：selectedStepChangeイベント

Angular、Angular Material、Angular Material 2における「mat-horizontal-stepper」のステッププログラム的移動

mat-horizontal-stepperコンポーネントは、Angular Material 2で提供される水平方向のステップナビゲーションコンポーネントです。このコンポーネントを用いて、ユーザーが順を追って操作を進めるようなインターフェースを作成できます。

プログラム的ステップ移動

mat-horizontal-stepperコンポーネントのステップをプログラム的に移動したい場合は、以下の方法で実現できます。

selectedIndexプロパティは、現在表示されているステップのインデックスを指定します。このプロパティを直接設定することで、プログラム的にステップを移動できます。

this.stepper.selectedIndex = 2; // 3番目のステップに移動

selectedStepChangeイベントは、ステップが選択されたときに発生するイベントです。このイベントのリスナー関数内で、stepper.selectedIndexプロパティを設定することで、プログラム的にステップを移動できます。

this.stepper.selectedStepChange.subscribe((event) => {
  if (event.selectedIndex === 1) {
    this.stepper.selectedIndex = 3; // 選択されたステップが2番目であれば、3番目のステップに移動
  }
});

next()メソッドとprevious()メソッドは、それぞれ次のステップと前のステップに移動するメソッドです。これらのメソッドを直接呼び出すことで、プログラム的にステップを移動できます。

this.stepper.next(); // 次のステップに移動
this.stepper.previous(); // 前のステップに移動

注意点

• selectedIndexプロパティを直接設定する場合、バリデーションエラーが発生する可能性があります。バリデーションエラーが発生しないように、selectedStepChangeイベントを使用することを推奨します。
• next()とprevious()メソッドを使用する場合、ステップの範囲を超えて移動することはできません。

補足

上記の解説は、Angular 9.1.0、Angular Material 13.0.2、Angular Material 2 13.0.2をベースにしています。バージョンによってAPIや動作が異なる場合がありますので、最新の情報は公式ドキュメントを参照してください。

Angular Material で mat-horizontal-stepper のステップをプログラム的に移動するサンプルコード

selectedIndex プロパティ

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

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html',
  styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent {
  @ViewChild('stepper') stepper: MatStepper;

  constructor() { }

  goToThirdStep() {
    this.stepper.selectedIndex = 2; // 3番目のステップに移動
  }
}

<mat-horizontal-stepper #stepper>
  <mat-step label="Step 1">
    Content for step 1
  </mat-step>
  <mat-step label="Step 2">
    Content for step 2
  </mat-step>
  <mat-step label="Step 3">
    Content for step 3
  </mat-step>
</mat-horizontal-stepper>

<button (click)="goToThirdStep()">Go to third step</button>

selectedStepChange イベント

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

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html',
  styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent {
  @ViewChild('stepper') stepper: MatStepper;

  constructor() {
    this.stepper.selectedStepChange.subscribe((event) => {
      if (event.selectedIndex === 1) {
        this.stepper.selectedIndex = 3; // 選択されたステップが2番目であれば、3番目のステップに移動
      }
    });
  }
}

<mat-horizontal-stepper #stepper>
  <mat-step label="Step 1">
    Content for step 1
  </mat-step>
  <mat-step label="Step 2">
    Content for step 2
  </mat-step>
  <mat-step label="Step 3">
    Content for step 3
  </mat-step>
</mat-horizontal-stepper>

next() と previous() メソッド

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

@Component({
  selector: 'app-stepper-example',
  templateUrl: './stepper-example.component.html',
  styleUrls: ['./stepper-example.component.css']
})
export class StepperExampleComponent {
  @ViewChild('stepper') stepper: MatStepper;

  constructor() { }

  goToNextStep() {
    this.stepper.next(); // 次のステップに移動
  }

  goToPreviousStep() {
    this.stepper.previous(); // 前のステップに移動
  }
}

<mat-horizontal-stepper #stepper>
  <mat-step label="Step 1">
    Content for step 1
  </mat-step>
  <mat-step label="Step 2">
    Content for step 2
  </mat-step>
  <mat-step label="Step 3">
    Content for step 3
  </mat-step>
</mat-horizontal-stepper>

<button (click)="goToNextStep()">Go to next step</button>
<button (click)="goToPreviousStep()">Go to previous step</button>

上記のサンプルコードでは、mat-horizontal-stepperコンポーネントのステップをプログラム的に移動する方法を3通り示しています。

• selectedIndexプロパティを使用して、直接ステップインデックスを設定する方法
• selectedStepChangeイベントを使用して、ステップが選択されたときにプログラム的にステップを移動する方法
• next()とprevious()メソッドを使用して、次のステップと前のステップに移動する方法

それぞれの方法には、それぞれメリットとデメリットがあります。状況に応じて適切な方法を選択してください。

Angular Material で mat-horizontal-stepper のステップをプログラム的に移動するその他の方法

linearオプションをtrueに設定すると、ユーザーは前のステップに戻ることができなくなります。このオプションを設定することで、プログラム的に次のステップに移動する必要がある場合に役立ちます。

<mat-horizontal-stepper linear>
  </mat-horizontal-stepper>

completedプロパティは、ステップが完了しているかどうかを指定します。このプロパティをtrueに設定すると、そのステップはスキップされます。

<mat-step label="Step 1" completed>
  Content for step 1
</mat-step>

<form (ngSubmit)="onSubmit()">
  <mat-horizontal-stepper>
    </mat-horizontal-stepper>
</form>

onSubmit() {
  if (this.form.valid) {
    this.stepper.selectedIndex = 2; // 3番目のステップに移動
  }
}

<button (click)="goToThirdStep()">Go to third step</button>

goToThirdStep() {
  this.stepper.selectedIndex = 2; // 3番目のステップに移動
}

• 上記で紹介した方法は、すべてAngular Material 13.0.2以降で利用可能です。それ以前のバージョンでは利用できない機能もありますので、ご注意ください。
• linearオプションを使用すると、ユーザーが前のステップに戻ることができなくなります。状況によっては、ユーザーエクスペリエンスに影響を与える可能性がありますので、注意が必要です。
• completedプロパティを使用すると、ステップがスキップされます。スキップされたステップは表示されませんので、ご注意ください。
• ngSubmitイベントを使用する場合は、フォームが送信される前にステップを移動する必要があります。
• clickイベントを使用する場合は、ボタンやその他の要素にイベントリスナーを設定する必要があります。