0

I have a material stepper representing an array of objects. I'm trying to set the current step of the angular material v9 stepper to the last element of the array of objects. The problem is that the array of objects is a component input and I think the material stepper is being rendered before the @Input() gets resolved so I get a Error: cdkStepper: Cannot assign out-of-bounds value to 'selectedIndex'. error.

I thought I'd be able to get it to work if I set the selected index programmatically in a ngAfterViewInit()

ngAfterViewInit() {
  this.stepper.selectedIndex = this.inputArray.length;
}

but that still seems to throw the error. Where should I be setting this so that the selected index is set properly after the material stepper has been rendered, and after the input has been received by the component?

Note, I see there are a number of 'lifecycle hooks' on the MatStepper class but I don't see anything documentation about them in the material docs.

gh0st
  • 1,653
  • 3
  • 27
  • 59

1 Answers1

0

You might be using immutable array like array.push to set values in the parent component. Instead use mutable array like array = array.push. This way change detection will capture the change.

Arun205
  • 439
  • 6
  • 10