How to load steps dynamically using Angular material stepper

Question

I want to load steps dynamically Like I have Offering component under that there are two steps label

Offering detail(it should load offering detail component)
Add User(it should display Add user component)

so stepper should display 2 steps only.

again I have Datasourceaccess component and under that 3 steps are there, so I want to build reusable stepper component which can be used by any components and should display steps according to components.

below stack blitz link, showcasing the above problem

StackBlitz : https://stackblitz.com/edit/angular-4xg2no

Fyi, here I am working on sharedwizard.component and sharedWizard.componet.html

score 0 · Accepted Answer · answered Mar 18 '19 at 09:05

0

You can use [selectedIndex]="stepIndex", and using the component's controller to update the stepIndex as you expected

answered Mar 18 '19 at 09:05

Nguyen Phong Thien

3,237
1
15
36

but how to pass different array value in steeper for loop like offering, datasource , datasourceaccess? – Abhishek Kumar Mar 18 '19 at 09:23
if I will use index and later if some one change the order of label then how it will work what approach should I follow. – Abhishek Kumar Mar 18 '19 at 09:25
How to load dynamically stepper – Abhishek Kumar Mar 18 '19 at 09:31
no, it is not that complicated. You just need to update the this.stepIndex whenever you want to update the index – Nguyen Phong Thien Mar 18 '19 at 09:35
stepIndex is just a number – Nguyen Phong Thien Mar 18 '19 at 09:35
Thanks Now I am able to do this – Abhishek Kumar May 07 '19 at 18:50

How to load steps dynamically using Angular material stepper

1 Answers1