月間18,000PV達成! 収益は毎日発生中! 記事は毎日更新中! ホワイトハッカー育成スクール通ってます! ギランバレー症候群に関する情報を集めています

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

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

 

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

↓こんなやつですね。

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の使い方

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

 

 

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

 

 

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

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

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

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

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

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

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

 

 

Advertisement

 

matStepperNextをJavaScriptで制御する方法

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

 

 

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

 

 

参考サイト

■Stack Overflow

URL:「https://stackoverflow.com/questions/46469233/can-i-programmatically-move-the-steps-of-a-mat-horizontal-stepper-in-angular-a」

 

 

おすすめ書籍

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

 

 

 

まとめ

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

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

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

以上!

Travelerを知らないの?