Step Up Your Form Game: Angular Material Stepper

Not too long ago, my team was looking to build a form based on the stepper in the Material Design docs. Naturally, as we had Angular Material as one of our dependencies already, we first checked to see if they already had built one. No such luck, though a few dozen people had already requested one through AM’s github issues.

Instead of just waiting for them to oblige, I decided to build a simple one myself. Here’s a plunker.

Using it is pretty easy! As the plunker demonstrates, all that’s necessary is to create directives for each of the sub-sections, then pass in a list of objects with the keys `title` and `directive` for each directive in order under the attribute `section`. Additionally, if desired, you can pass in data to each of the sub-sections using a cleverly titled `data` attribute. Finally, if you want a button to be included in the final subsection to continue out of the stepper, just transclude it into the stepper. It’ll place it for you!

There’s always plenty more to work on something like this, but it’s a pretty barebones, reusable implementation involving some fun AngularJS and JavaScript tricks. For one of those tricks you can also check out my last blog post. Enjoy!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s