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?

score 2 · Accepted Answer · edited Dec 22 '20 at 09:00

2

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.

edited Dec 22 '20 at 09:00

Ragu

772
9
29

answered Dec 21 '20 at 13:05

Shantanu Sharma

666
6
21

Note that `selectedIndex` will also overrides the behavior of `nbStepperPrevious` and `nbStepperNext` buttons. – Mosrainis Oct 18 '21 at 12:29

score -2 · Answer 2 · answered Dec 21 '20 at 12:43

-2

this.stepper.goto(2);

it will navigate to second step...

answered Dec 21 '20 at 12:43

Shantanu Sharma

666
6
21

there is no method goto in nbstepper – Ragu Dec 21 '20 at 12:51
please update the ngx-stepper lib RUN : "npm update ngx-stepper" – Shantanu Sharma Dec 21 '20 at 12:58
I used nb stepper. why i update ngx-stepper – Ragu Dec 21 '20 at 13:12
use this.stepper.selectedIndex=2 – Shantanu Sharma Dec 21 '20 at 13:27

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

2 Answers2