Materialデザインには「Stepper」と呼ばれるものがあります。
↓こんなやつですね。
で、このStepperをサインアップの画面に使いたいということで導入したのですが、ステップを進めるのをJavaScript側で制御したいわけです。
ということで今回は、MaterialデザインのStepperをコードで制御する方法を解説します！
僕の環境
OS：Windows10
Angular：7
Material Stepperとは
Material Stepperとは、Materialデザインに含まれるStepperというコンポーネントになります。
以下が公式サイトになります。
■Stepper | Angular Material
URL：「https://material.angular.io/components/stepper/overview」
Material Stepperの使い方
|
1 |
import { MatStepperModule } from '@angular/material/stepper'; |
「app.module.ts」に記載します。これで、各コンポーネントで「Material Stepper」が使えるようになります。
|
1 |
import { MatStepper } from '@angular/material/stepper'; |
コンポーネントで「MatStepper」を読み込みます。
ステップを進める簡単な方法
公式サイトにも書かれていますが、ステップを進めるには「matStepperNext」を使います。
また、ステップを戻すには「matStepperPrevious」を使います。
|
1 2 3 4 5 6 7 8 9 |
<mat-horizontal-stepper> <mat-step> ... <div> <button mat-button matStepperPrevious>Back</button> <button mat-button matStepperNext>Next</button> </div> </mat-step> </mat-horizontal-stepper> |
こんな感じになりますが、このソースコードは結構問題があります。
ステップを進めるにあたって、サーバ側に通信することも良くある話です。というか、ボタン押したら勝手に進むなんていう簡単な使い方はほぼしないはずです。
例えば、進むボタンを押してサーバへ通信し、サーバでエラーが発生した場合、ステップを進めずにエラーメッセージを表示するのが正しい挙動のはずです。
ということは、「matStepperNext」をJavaScript(AngularではTypeScript)で制御する必要が出てくるわけです。
matStepperNextをJavaScriptで制御する方法
|
1 2 3 4 5 6 |
<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> |
HTML側です。stepperを関数の引数として渡すことができます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/** * ステップを戻す * * @param stepper ステッパー */ public goBack(stepper: MatStepper): void { stepper.previous(); } /** * ステップを進める * * @param stepper ステッパー */ public goForward(stepper: MatStepper): void { stepper.next(); } |
引数で渡されたstepperを使用し、上記のような形で操作できます。簡単ですね。
参考サイト
■Stack Overflow
URL：「https://stackoverflow.com/questions/46469233/can-i-programmatically-move-the-steps-of-a-mat-horizontal-stepper-in-angular-a」
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
公式サイトに載っているソースコードは実用性のないものばかりですね。
便利そうに見えて、「実際そんな簡単な使い方しねーよ」みたいなものが多すぎです。
もっと親切に細かい部分も書いてほしいものです。
以上！
