Get step index from Angular Material Design Stepper

Question

I am trying to get the selected step in an component that is using Angular Material Design stepper.

The thing is that I am trying to get it by using selectedIndex property, but now is always getting "1" when I try to get it

        <button mat-button mat-flat-button color="primary"
                (click)="onSave(stepper)">
          SAVE
        </button>

onSave(stepper: MatStepper)
  {
    debugger;
    let workflowStepName = this.declarationWorkflowHelper.getWorkflowName(stepper.selectedIndex);

    this.screenSave.next(workflowStepName);
  }

I expect the selected index of the stepper, but I am always retrieving "1"

StepUp StepUp · Accepted Answer · 2019-06-27T14:06:04

Try to set explicitly stepControl to your matStep. E.g. firstFormGroup, secondFormGroup :

<mat-step [stepControl]="firstFormGroup">
    <form [formGroup]="firstFormGroup">
      <!-- The code is omitted for the brevity -->
      <div>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <form [formGroup]="secondFormGroup">
      <!-- The code is omitted for the brevity --> 
     <div>
        <button mat-button matStepperPrevious>Back</button>
        <button mat-button matStepperNext>Next</button>
      </div>
    </form>
  </mat-step>

Get step index from Angular Material Design Stepper

1 Answers