mat-stepper reset forward step when clicked on previous - Angular 6

Question

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.

Answer 1

Applying both of the solutions above, didn't work for me. I didn't see any step reset. It worked though to remove any data carried from one step to the next one.

Answer 2

I just found another solution, that looks much better and automate the process:

<mat-horizontal-stepper [linear]="true" #stepper (selectionChange)="clearNextSteps($event)">
      <mat-step>

      </mat-step>
      <mat-step>

      </mat-step>
      <mat-step>

      </mat-step>
      <mat-step>
      </mat-step>
    </mat-horizontal-stepper>

And in component add this:

  @ViewChild('cinemaStep') cinemaStep: MatStep;
  @ViewChild('seatsStep') seatsStep: MatStep;
  @ViewChild('servicesStep') servicesStep: MatStep;
  @ViewChild('confirmStep') confirmStep: MatStep;

  clearNextSteps(stepper): void {
    const index = stepper.selectedIndex;
    switch (index) {
      case 0:
        this.seatsStep.reset();
      case 1:
        this.servicesStep.reset();
      case 2:
        this.confirmStep.reset();
    }
  }

Answer 3

    <mat-horizontal-stepper [linear]="true" #stepper>
      <mat-step #one>

      </mat-step>
      <mat-step #two>

      </mat-step>
      <mat-step #three>

      </mat-step>
      <mat-step #four>
        <button mat-button (click)="changeStep(0)">Go first</button>
      </mat-step>
    </mat-horizontal-stepper>

In component code:

import {Component, ViewChild} from '@angular/core';

import {MatStep, MatStepper} from '@angular/material/stepper';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {

  @ViewChild('stepper') stepper: MatStepper;
  @ViewChild('one') one: MatStep;
  @ViewChild('two') two: MatStep;
  @ViewChild('three') three: MatStep;
  @ViewChild('four') four: MatStep;

  changeStep(index: number): void {
    this.four.reset(); // resets 4th
    this.three.reset(); //resets 3rd
    this.stepper.selectedIndex = index; // move selected index (in html I set 1st)
  } 
}

This will move you to the 1st step, but 3rd and 4th steps will be reset