angularnebularngx-admin

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

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?

Solution

  • 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.