Mat-Stepper: Setting selected index to dynamically added step causes exception

[Antonvb]

Reproduction

Use StackBlitz to reproduce your issue: https://stackblitz.com/edit/angular-cdafd9?file=app%2Fstepper-overview-example.ts

Steps to reproduce:

1. Create a mat-stepper component that renders mat-step elements from an array
2. Pass in the selected index from the component (initially set to 0)
3. Add a new element to the steps array for a dynamically added step and set the selected index to the new step index

Expected Behavior

Would expect to navigate to the new step component that was just added and for the stepper header to update

Actual Behavior

The new step gets added as expected, but the updating of the selected index leads to an exception Error: cdkStepper: Cannot assign out-of-bounds value to selectedIndex - although the assigned index matches the last element in the array used to render the steps

Environment

• Angular: 8.2.6
• CDK/Material: 8.1.4
• Browser(s): Chrome 77
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[tomicarsk6]

Please refer to this #9127.

[konrad-garus]

This is a pretty annoying bug, sometimes very hard to work around.

One "solution" is to force the stepper component to be recreated when your list of steps changes. It happily accepts any value if it hasn't received any steps yet. For example:

<ng-container *ngFor="let __ of [myThingThatHasSteps]">
  <mat-horizontal-stepper [selectedIndex]="stepIndex">
    <mat-step *ngFor="let step of myThingThatHasSteps.steps">...</mat-step>
  </mat-horizontal-stepper>
</ng-container>

[dcrouch79]

Another workaround is to set the selectedIndex after setTimeout to ensure the stepper has updated itself:

setTimeout(() => (this.stepper.selectedIndex = this.steps.length - 1), 0);

https://stackblitz.com/edit/angular-components-issue17134-workaround

[Polyterative]

Dealt with this today. Luckily a debounceTime(1) seems to work to offset the time enough