Search code examples
angularangular-material2mat-stepper

mat-stepper inside a ngbmodal issue

I have a used a mat stepper inside an ngbmodal and my aim is to create a stepper feature. however the steps i need are not linear and based on selections you may go back and forth.

for Example
step 1

button - click to go to step 2
button - click to go to step 3

step 2

button - click to go to step 4
button - click to go to step 5

step 3

button - click to go to step 1
button - click to go to step 2

I declare the stepper as

@ViewChild('stepper') stepper:Matstepper;

for the jumps, i am using the stepper as id and then invoking
this.stepper.selectedIndex = (required step index);

however when the code runs i get "this.stepper" as undefined and hence an error like "cannot set selectedIndex of undefined".

The modal is opened conditionally. However the error is thrown even when the modal is open and you can see the mat-stepper on page which means it is now present in the DOM too.

What am I doing wrong here.?

Solution

  • In case someone is facing the issue comes i have found a solution.

    I use the selectedIndex property on the html element itself instead of using a selector and viewchild