How to navigate one step to another steps programmatically in ngx-admin nebular stepper?

Question

I am using nebular ngx-admin template. I am facing some issues in nebular stepper. I have used four steps in one component.

I used Nebular API's methods in component file:

@ViewChild("stepper") stepper: NbStepperComponent;

this.stepper.next();
this.stepper.previous();
this.stepper.reset();

The next() is navigate to next steps.
The previous() is navigate to previous steps.
The reset() is navigate to first step and reset all form data.

How can I navigate from 4th step to 2nd step?

Answer 1

Use this way,

In HTML file

 <nb-stepper #stepper [(selectedIndex)]="stepperIndex">

    <nb-step [stepControl]="serviceForm" label="Select Package">

    <button nbButton 
    (click)="backToSelectPackage()">ADD</button>

    </nb-step> 

 </nb-stepper>

In Component.ts file

stepperIndex: number = 0; // here 0 is initial index

backToSelectPackage() {
  this.stepperIndex = 0; // here 0 is navigate index
}

Note:

If used [(selectedIndex)] , We can't use next(), Previous() and nbStepperNext, nbStepperPrevious.

Answer 2

this.stepper.goto(2);

it will navigate to second step...