Pfthb

Angular 6 app

stepper.component.html,

 <mat-horizontal-stepper #stepper (selectionChange)="selectedStep($event)">
 <ng-template matStepperIcon="edit">
 <mat-icon>check_circle</mat-icon>
 </ng-template>

 <ng-template matStepperIcon="number" let-index="index">
 <mat-icon>check_circle</mat-icon>
 </ng-template>

 <mat-step>
 <ng-template matStepLabel >Fill</ng-template>
 </mat-step>
 <mat-step>
 <ng-template matStepLabel >Validate</ng-template>
 </mat-step>
 <mat-step>
 <ng-template matStepLabel>Complete</ng-template>
 </mat-step>
 </mat-horizontal-stepper>

stepper.component.ts,

@ViewChild('stepper') stepper: MatStepper;
stepIndex = 2;

ngAfterViewInit() 
 this.stepper._steps.forEach((step, index) => 
 const currentStepId = ++index;
 if (this.stepIndex >= currentStepId) 
 step.select(); //This will set the header selected state
 
 );


selectedStep(matStep: any) 
 const selectedStep = ++matStep.selectedIndex;
 console.log(selectedStep);

The above code, will set the first two steps selected when stepIndex property is 2.

I want forward/backward step reset based on current step selected

• If current step is 2. When step 1 is selected, I want to
  deselect/reset the step 2.




• If current step is 1. When step 3 is selected, I want to set selected state for Step 2 also.