[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか？

質問

Angular Material（Angular 4+）について質問があります。私のコンポーネントテンプレートに <mat-horizontal-stepper> コンポーネントを追加し、各ステップ内で <mat-step> コンポーネントを移動するためのステッパーボタンがあるんだ。このように

<mat-horizontal-stepper>
  <mat-step>
    Step 1
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 2
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
  <mat-step>
    Step 3
    <button mat-button matStepperPrevious type="button">Back</button>
    <button mat-button matStepperNext type="button">Next</button>
  </mat-step>
</mat-horizontal-stepper>

今、私は、各ステップからボタンを取り除いて、他の場所にある <mat-horizontal-stepper> の中の静的な位置や、あるいは <mat-horizontal-stepper> で、コンポーネントtypescriptファイル内のコードを使って前後に移動することができます。アイデアを出すために、私は自分のHTMLを次のようなものにしたいと思います。

<mat-horizontal-stepper>
    <mat-step>
        Step 1
    </mat-step>
    <mat-step>
        Step 2
    </mat-step>
    <mat-step>
        Step 3
    </mat-step>
    <!-- one option -->
    <div>
       <button mat-button matStepperPrevious type="button">Back</button>
       <button mat-button matStepperNext type="button">Next</button>
    </div>
</mat-horizontal-stepper>

<!-- second option -->
<div>
   <button (click)="goBack()" type="button">Back</button>
   <button (click)="goForward()" type="button">Next</button>
</div>

どのように解決するのですか？

はい、特定のステッパーにジャンプするには selectedIndex プロパティに MatStepper . また MatStepper はパブリックメソッドを公開しています。 next() と previous() . これらを使って、前後に移動することができます。

テンプレートで

ステッパーにidを追加します。 #stepper . そして、あなたの goBack() と goForward() メソッドで、ステッパー ID を渡します。

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

...そしてタイプスクリプトで

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

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

リンク先 スタックブリッツ・デモ .

また ViewChild を使って、以下のようにTypeScriptでステッパー・コンポーネントへの参照を取得することもできます。

@ViewChild('stepper') private myStepper: MatStepper;

goBack(){
    this.myStepper.previous();
}

goForward(){
    this.myStepper.next();
}

この場合、コンポーネントのhtml内のメソッドでステッパーのリファレンスを渡す必要はありません。リンク先 ViewChildを使ったデモ

を有効/無効にすることができます。 Back と Next ボタンを以下のように使用します。

<button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
<button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>