Topic: How to get stepper stepChange event to work?
Expected behavior Execute Event while user navigate through Steppers steps
Actual behavior Can't implement it, I checked the answer her https://mdbootstrap.com/support/angular/stepper-event-when-selectionchanged but I don't find any documentation to implement or use stepChange propriety,Please advice how to use stepChange inmdb-stepper
Resources (screenshots, code snippets etc.)
<mdb-stepper #stepper [linear]="true">
<mdb-step name="Step 1" [stepForm]="firstFormGroup">
<form [formGroup]="firstFormGroup">
<div class="md-form">
<input type="text" class="form-control" mdbInput mdbValidate
formControlName="email">
<label for="">Email</label>
<mdb-error *ngIf="email.invalid && (email.dirty || email.touched)">Input invalid</mdb-
error>
<mdb-success *ngIf="email.valid && (email.dirty || email.touched)">Input valid</mdb-
success>
</div>
</form>
<button mdbBtn size="sm" color="primary" (click)="stepper.next()">CONTINUE</button>
</mdb-step>
<mdb-step name="Step 2" [stepForm]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<div class="md-form">
<input type="password" class="form-control" mdbInput mdbValidate
formControlName="password">
<label for="">Password</label>
<mdb-error *ngIf="password.invalid && (password.dirty || password.touched)">Input
invalid</mdb-error>
<mdb-success *ngIf="password.valid && (password.dirty || password.touched)">Input
valid</mdb-success>
</div>
</form>
<button mdbBtn size="sm" color="primary"
(click)="stepper.next()">CONTINUE</button>
<button mdbBtn size="sm" color="secondary"
(click)="stepper.previous()">BACK</button>
</mdb-step>
<mdb-step name="Step 3" label="Step 3 label">
<p class="pl-2">Finish!</p>
<div class="step-actions">
<button mdbBtn size="sm" color="primary" (click)="onSubmit()">SUBMIT</button>
</div>
</mdb-step>
</mdb-stepper>
You need to add (stepChange) ouput to the mdb-stepper element and specify a onStepChange($event) method that will be fired on every step change:
<mdb-stepper #stepper [linear]="true" (stepChange)="onStepChange($event)">
Then in your ts file you can add onStepChange method implementation:
import { StepChangeEvent } from 'ng-uikit-pro-standard';
onStepChange(event: StepChangeEvent) {
console.log(event);
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.8.2
- Device: PC
- Browser: Chrome
- OS: Ubuntu
- Provided sample code: No
- Provided link: Yes