18

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

4
  • 2
    The problem is because of [linear]="true". when you set this as false then your code will working fine. Commented Sep 3, 2018 at 6:23
  • 1
    but i cant use the prev next validation.. do you have a suggestion on how to work around the problem Commented Sep 4, 2018 at 16:02
  • what issue does your stackblitz demo have ? @RicardoSaracino
    – candidJ
    Commented Sep 5, 2018 at 6:32
  • the next button doesnt work Commented Sep 5, 2018 at 12:31

4 Answers 4

19

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.

2
  • 2
    This didn't work for me with Angular/Material 8+ . Seems like there is more discussion about it not working here - github.com/angular/components/issues/8479
    – chrismarx
    Commented Dec 11, 2019 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
    Commented May 1, 2020 at 5:56
1

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

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

1
  • 6
    Didnt work for me in angular 8.2. this.stepper.selectedIndex = 4; console.log(this.stepper); produced _selectedIndex: 0 Commented Jan 7, 2020 at 12:58
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.