How to get stepper stepChange event to work?

Topic: How to get stepper stepChange event to work?

jederrick free asked 5 years ago

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>

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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);
}

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

jederrick

25Support score
3Questions 1Answers 1Snippets