feat(cdk-stepper): change orientation on runtime or expose key manager property

[Phil147]

Feature Description

Make it possible to change the orientation between horizontal and vertical during runtime. This could also be made possible by exposing the current private _keyManager property either by making it protected or providing a public getter/method so that the consumer of the CdkStepper can manage that on their own.

Use Case

In our case we want to be able to switch between vertical and horizontal orientation on a single component via an Input. Switching orientation should have some effects, most importantly that keyboard controls should be different (UP and DOWN arrows for vertical orientation).
In the current implementation and how it is implemented in material that is done by two separate components that explicitly set the _orientation property and setting the keymanager up in the ngAfterViewInit hook.

Pseudo Code what we'd like to do:

export class MyStepper extends CdkStepper {
  @Input()
  set direction(value) {
    this._direction = value;
    this._keyManager.withVerticalOrientation(this._direction === 'vertical');
  }
}

Right now I think just changing the orientation in the keyManager should be enough, even nicer would be that the CdkStepper would already support setting the _orientation property dynamically, but I'd understand if you don't want to support that inside the CdkStepper. In this case exposing the keyManager would give us as the consumer the possibility at our own risk to implement this feature and not being forced into doing two separate components.

What do you think? I am happy to open a PR if you want to support that use case.

[crisbeto]

I've submitted #21940 which adds a getter/setter to the CdkStepper. It's worth noting that the orientation field isn't an Input so that it doesn't bleed into MatStepper which doesn't support changing the orientation. You can do the following to turn it into an input for your custom stepper:

@Component({
  selector: 'my-stepper',
  inputs: ['orientation']
})
class MyStepper extends CdkStepper {}

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}