やっほー
【Angular7】MaterialのmatStepperNextをコードで制御!

【Angular7】MaterialのmatStepperNextをコードで制御!

  • 2019年1月31日
  • 2021年3月19日
  • Angular
  • 102view

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

↓こんなやつですね。

stepper

 

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

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

AngularMaterialの使い方はこちら

AngularとMaterialデザインの組み合わせって素晴らしいーー。 AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。 ということで今回は、Angularで[…]

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

Material Stepperとは

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

こちらが公式サイトになります。

Material Stepperの使い方

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

 

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

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

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

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

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

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

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

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

matStepperNextをJavaScriptで制御する方法

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

 

引数で渡されたstepperを使用し、上記のような形で操作できます。簡単ですね。

参考サイト

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

まとめ

公式サイトに載っているソースコードは実用性のないものばかりですね。

便利そうに見えて、「実際そんな簡単な使い方しねーよ」みたいなものが多すぎです。

もっと親切に細かい部分も書いてほしいものです。

以上!

【Angular7】MaterialのmatStepperNextをコードで制御!
フォローしてもらえると泣いて喜びます