DEV Community

How I Built A Custom Stepper/Wizard Component Using The Angular Material CDK

Michael Hoffmann on December 26, 2018

Recently I had to refactor a quite complex legacy Angular component and I want to share my experiences with you. The Legacy Component T...
Collapse
 
ledrago profile image
ledrago

Thanks a lot for your example which has been very useful to me. Would you know how to attach an angular animation for customize the transition between steps ? I struggle to make it work...

Collapse
 
mokkapps profile image
Michael Hoffmann

Thanks! Unfortunately not. I would suggest you create a new issue at the offical GitHub repository because there are for sure people which can help you!

Collapse
 
ledrago profile image
ledrago

Thanks for the advice ! I'm gonna do it right away.

Collapse
 
orimdominic profile image
Orim Dominic Adah

Hello! Is there a demo on github for this that you created?

Collapse
 
mokkapps profile image
Michael Hoffmann

Hi, I meanwhile added an official documentation to the Angular material repo:
material.angular.io/guide/creating...

An example from there: github.com/angular/material2/blob/...

Collapse
 
orimdominic profile image
Orim Dominic Adah

Thanks. I'll check it out! 🙂

Collapse
 
venkateswarannraja profile image
venkateswarannraja

I would like to know, is there any option to develop like vertical wizard with my requirement? Similar to mat-vertical-wizard.

My requirement is that initially other than first step all steps should be in disabled mode. I can achieve by using linear property. Once when i complete first step i need to open second step as well first step should be in enable mode. Not with disable mode. Similarly it should work for all steps.

Collapse
 
mokkapps profile image
Michael Hoffmann

Using this CDK you are completely free how to design you wizard, so you can also make it vertical