[Mat-Stepper] A few suggestions

[christikaes]

Thanks for everyone who works on this project! I just upgraded to beta12 and am using the Stepper component now. I had a few proposals after using it for a bit. Please let me know what you think-I'd love to help contribute if we want any of these (:

1. Mat-Stepper with horizontal/vertical as an input.
   • Use Case: I have a stepper that I want to toggle between horizontal/vertical for different screen aspect ratios but with the same content and steps. Currently I would need to create two separate components and toggle between the two which feels messy.
   • Proposal: Replace mat-vertical-stepper and mat-horizontal-stepper with mat-stepper that takes in an input to toggle between the two views
2. SelectedIndex as input.
   • Use Case: I want to programmatically change the current selectedStep. There was a question asked here about how to switch to the first step by setting the stepper.selectedIndex. I haven't been able to get this to work (possibly because of ChangeDetectionStrategy.OnPush)?
   • Proposal: Stepper should take SelectedIndex as an input
   • EDIT: Should be fixed by CdkStepper error when binding to selectedIndex #8031
3. Reset Stepper.
   • Use Case: I want to reset the stepper. I am using formGroup.reset() to reset each form, but this does not reset the visited states of each one of the steps.
   • Proposal: Some way of resetting the stepper component to the initial state: First step is selected, Forms are reset, None of the steps have been touched etc.
4. Animate Height.
   • Use Case: Currently the steps slide right/left but the height of the stepper does not transition smoothly.
   • Proposal: Transition the height of the steps when changing from one step to the other
     Let me know what you think~

[sam-lex]

Would like to add one more suggestion here as well:
5. Disabled step. Or a way to add/remove steps.

• Use Case: Additional steps depending on what is being selected in previous steps. (like a wizard form).

I was able to add steps with something like this:

<mat-step *ngFor="let invForm of inventoryForms"
    [stepControl]="invForm.form" [label]="invForm.item.product.name">
</mat-step>

but if I go back to previous step, and change it so that these additional steps aren't required, and setting this.inventoryForms = [], the steps are not removed from the stepper.
Even wrapping it inside a <ng-container *ngIf="inventoryForms.length > 0"> did not work. 😞

[sam-lex]

I got a work-around, but is probably a bad idea 😅

1. Make a reference to the stepper:

<mat-vertical-stepper #stepper></mat-vertical-stepper>

2. Then, on the .ts side:

import { ViewChild } from '@angular/core';
import { MatVerticalStepper } from '@angular/material';

@ViewChild('stepper') stepper: MatVerticalStepper;

clearAdditionalForms(): void {
  this.inventoryForms = [];
  this.stepper._stateChanged(); // <- this : Marks the component to be change detected.
}

[justinwaite]

I would like to also leave a suggestion.
6. Async step support. If each step is using it's own FormGroup, while using linear="true", the forms should be submitted before moving on to the next step.

[davidrensh]

disabled attribute is must have.
For example: we have 5 steps, step N is disabled by business logic. Then it should be gray out and not editable

[spongessuck]

Perhaps related to 4. Animate Height: having it animate the same way tab transitions where you see the current content slide out

[vegham]

Have any one a solution for suggestion 1? I tried quickly the same as in #8014 but ran into same issues.

[Misiu]

As @jdeanwaite suggested async step support is critical.
I need to create 5 step process, when user clicks Next I'd like to submit data from that step to server, so that user can come back later and resume process.

linear="true" solves problem with disabling ability to move to next step before filling current, but there should be option to disable moving back. In my case when user submits current step by clicking Next he can't move back. Currently he can click Back button or use labels to navigate, so disable attribute is a must have for me.