Angular Stepper with selectedIndex set matStepperNext/matStepperPrevious not working

Question

Im using a matStepper and when i set the selectedIndex to 3 i cannot navigate using next and previous. i can click the (1) in the horizontal stepper and then use the next/prev as usual. All the forms are valid and i can navigate using next from 1-7 after clicking (1).

Note i have this.selectedIndex = 3; hardcoded

<mat-horizontal-stepper #stepper
                        [linear]="true"
                        [selectedIndex]="this.selectedIndex"
                        (selectionChange)="selectionChange(stepper)">

  <mat-step [stepControl]="form1">
    <app-observer-information></app-observer-information>
  </mat-step>
...
  <mat-step [stepControl]="form7">
    <app-observer-agreement></app-observer-agreement>
  </mat-step>

</mat-horizontal-stepper>



export class ObservationStatementStepperComponent implements OnInit {

  @ViewChild('ObserverInformationComponent') public component1: ObserverInformationComponent;
  ..
  @ViewChild('ObserverAgreementComponent') public component7: ObserverAgreementComponent;

  public selectedIndex: number;

  constructor(private sorDataService: SorDataService) {

    this.selectedIndex = 3; // Number(sorDataService.selectedIndex);
  }

  public ngOnInit() {
  }

  public selectionChange(stepper) {

    this.sorDataService.synchronizeStepper(stepper.selectedIndex + 1);
  }

  /**
   * @see https://stackoverflow.com/questions/48498966/angular-material-stepper-component-for-each-step
   */
  get form1() {
    return this.component1 ? this.component1.form : null;
  }
  ...
  get form7() {
    return this.component7 ? this.component7.form : null;
  }
}

Issue is reproduced in stackblitz

<mat-horizontal-stepper linear #stepper [selectedIndex]="1">

https://stackblitz.com/edit/angular-syml71?file=app/create-profile.component.html

The problem is because of [linear]="true". when you set this as false then your code will working fine. — Aniket Avhad, Sep 03 '18 at 06:23
but i cant use the prev next validation.. do you have a suggestion on how to work around the problem — Ricardo Saracino, Sep 04 '18 at 16:02
what issue does your stackblitz demo have ? @RicardoSaracino — candidJ, Sep 05 '18 at 06:32

Oleg · Accepted Answer · 2020-05-01T06:03:54.600

18

Quick hack:

HTML:

<mat-vertical-stepper [linear]="true" #stepper>

TS:

 @ViewChild('stepper')
  stepper: MatStepper;
 
 nextClick(): void {
    this.stepper.linear = false;
    this.stepper.selectedIndex = ...;
    setTimeout(() => {
       this.stepper.linear = true;
    });
}

Edit: had to add "setTimeout" since it's not working without it anymore. Seems like a crazy hack which I hate, but no other choice unfortunately.

edited May 01 '20 at 06:03

answered May 18 '19 at 16:50

Oleg

594
8
9

2

This didn't work for me with Angular/Material 8+ . Seems like there is more discussion about it not working here - https://github.com/angular/components/issues/8479 – chrismarx Dec 11 '19 at 16:07
Yep, doesn't work with the v9, but setTimeout to the rescue. IMHO the Material team should make it working without all kind of crazy hacks. – Oleg May 01 '20 at 05:56

score 0 · Answer 2 · edited Feb 21 '20 at 16:55

0

To make this work with [linear]="true", use a setTimeout function with 0 delay:
setTimeout(() => {
  this.stepper.selectedIndex = ...;
});

Reference: https://github.com/angular/components/issues/8479#issuecomment-444063732

edited Feb 21 '20 at 16:55

double-beep

5,031
17
33
41

answered Jan 06 '20 at 20:11

phanf

661
1
11
16

6

Didnt work for me in angular 8.2. `this.stepper.selectedIndex = 4; console.log(this.stepper);` produced `_selectedIndex: 0` – Ricardo Saracino Jan 07 '20 at 12:58

score 0 · Answer 3 · answered Sep 30 '21 at 13:34

I know it seems dumb solution, but you can use stepper.next()

 @ViewChild('stepper')  stepper: MatStepper;
 selectedStepNumber = 2;
 ....
  ngAfterViewInit() {
      setTimeout(() => {
        for (let i = 0; i < this.selectedStepNumber; i++) {
          this.stepper.next();
        }
      }, 0);
    }

score 0 · Answer 4 · answered Jan 29 '23 at 18:22

Set the index in the component.js, and in the stepper bind the selected index with the index

like this:

       <mat-horizontal-stepper #stepper [selectedIndex]="index">
        <mat-step>
        </mat-step>
        <mat-step>
        </mat-step>
      </mat-horizontal-stepper>

This worked with angular 8

Angular Stepper with selectedIndex set matStepperNext/matStepperPrevious not working

4 Answers4