Materialデザインには「Stepper」と呼ばれるものがあります。
↓こんなやつですね。
で、このStepperをサインアップの画面に使いたいということで導入したのですが、ステップを進めるのをJavaScript側で制御したいわけです。
ということで今回は、MaterialデザインのStepperをコードで制御する方法を解説します！
AngularとMaterialデザインの組み合わせって素晴らしいーー。 AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。 ということで今回は、Angularで[…]
Material Stepperとは
Material Stepperとは、Materialデザインに含まれるStepperというコンポーネントになります。
こちらが公式サイトになります。
Material Stepperの使い方
|
1 |
import { MatStepperModule } from '@angular/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> |
|
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を使用し、上記のような形で操作できます。簡単ですね。
参考サイト
おすすめ書籍
僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ！
まとめ
公式サイトに載っているソースコードは実用性のないものばかりですね。
便利そうに見えて、「実際そんな簡単な使い方しねーよ」みたいなものが多すぎです。
もっと親切に細かい部分も書いてほしいものです。
以上！