Description
Bug, feature request, or proposal:
Bug
What is the expected behavior?
Since there is not currently a responsive stepper, I'm working with hiding/showing vertical and horizontal steppers based on the viewport size. When the viewport resizes and the steppers are swapped out, I need to set the selected index on the stepper that is coming into view. I'm doing that by listening to selectionChange event on the stepper, storing the index (defaulting to 0), and binding to it on both steppers.
What is the current behavior?
When Angular creates the stepper the first time, the bound index is set to 0. The CdkStepper set selectedIndex function is calling _anyControlsInvalid(), which has a NPE when checking for steps that have not yet been created:
TypeError: Cannot read property 'toArray' of undefined
at MatHorizontalStepper.CdkStepper._anyControlsInvalid (stepper.es5.js:373)
at MatHorizontalStepper.set [as selectedIndex] (stepper.es5.js:206)
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-ggc2sf
Error shows in console
What is the use-case or motivation for changing an existing behavior?
I can see additional uses for binding to selectedIndex, for example if you already know the user has completed some steps and you want to start them further along.
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Material beta 12