I'm working with nebular's NbStepperComponent in Angular 2
, so far it works fine, only that when I go to the next step I want to perform a previous validation from in a function
and just execute nbStepperNext
but I don't know how to execute the nbStepperNext
from a function
, since its documentation It does it directly from the HTML like this <button nbButton nbStepperNext> next </button>
I would like: "Execute the nbStepperNext
from a function"
something like that, but I don't know the correct syntax:
<button (click)="validacion()" type="button">Next</button>
validacion(){
//códe validation
stepper.next(); // and next step
}
My base code
import { Component } from '@angular/core';
@Component({
selector: 'nb-stepper-test',
template: `
<nb-stepper>
<nb-step>
<ng-template nbStepLabel>First step</ng-template>
<div class="step-container">
<h3>Información personal</h3>
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="nombre" style="width: 100%;" class="label">First Name</label>
<input type="text" nbInput id="nombre" fieldSize="small" formControlName="nombre" fullWidth>
</div>
</div>
<div class="col-sm-4">
<label for="paterno" class="label">Last Name</label>
<input type="text" nbInput id="paterno" fieldSize="small" formControlName="paterno" fullWidth>
</div>
<div class="col-sm-4">
<label for="correo" class="label">Correo</label>
<input type="text" nbInput id="correo" fieldSize="small" formControlName="correo" fullWidth>
</div>
</div>
<button class="btn btn-primary" disabled nbStepperNext>prev</button>
<button class="btn btn-primary" nbStepperNext>next</button>
</div>
</nb-step>
<nb-step>
<ng-template nbStepLabel>Second step</ng-template>
<div class="step-container">
<h3>Step content #2</h3>
<button class="btn btn-primary" nbStepperPrevious>prev</button>
<button class="btn btn-primary" nbStepperNext>next</button>
</div>
</nb-step>
<nb-step label="Third step">
<div class="step-container">
<h3>Step content #3</h3>
<button class="btn btn-primary" nbStepperPrevious>prev</button>
<button class="btn btn-primary" nbStepperNext>next</button>
</div>
</nb-step>
<nb-step>
<ng-template nbStepLabel>Fourth step</ng-template>
<div class="step-container">
<h3>Step content #4</h3>
<button class="btn btn-primary" nbStepperPrevious>prev</button>
<button class="btn btn-primary" disabled nbStepperNext>next</button>
</div>
</nb-step>
</nb-stepper>
`,
})
export class StepperTestComponent {
}
According to the documentation, next()
and previous()
are part of NbStepperComponent
. Therefor, your solution should be:
@Component({
selector: 'nb-stepper-test',
template: `
<nb-stepper #stepper>
<nb-step>
...
</nb-step>
<nb-step>
...
</nb-step>
<nb-step>
...
</nb-step>
</nb-stepper>
`,
})
export class StepperTestComponent {
@ViewChild('stepper') stepper: NbStepperComponent;
validacion() {
// Form validation goes here...
this.stepper.next();
}
}