feat(stepper): allow for orientation to be changed dynamically #9173

crisbeto · 2017-12-30T19:41:51Z

Turns the MatStepper into a proper component that allows consumers to switch between horizontal and vertical dynamically, allowing for use cases like having a different layout depending on the screen size.
Combines the mat-vertical-stepper and mat-horizontal-stepper templates into a single file to avoid all the code duplication.

Relates to #7700.

mmalerba · 2017-12-31T04:48:19Z

I prefer this approach, but @jelbourn is the one who pushed for separate horizontal and vertical components, so I'd like to hear what he thinks

* Turns the `MatStepper` into a proper component that allows consumers to switch between `horizontal` and `vertical` dynamically, allowing for use cases like having a different layout depending on the screen size. * Combines the `mat-vertical-stepper` and `mat-horizontal-stepper` templates into a single file to avoid all the code duplication. Relates to angular#7700.

kbo4sho · 2018-01-03T16:46:21Z

src/demo-app/stepper/stepper-demo.html

@@ -40,7 +42,7 @@ <h3>Linear Vertical Stepper Demo using a single form</h3>
        <button mat-button>Done</button>
      </div>
    </mat-step>
-  </mat-vertical-stepper>
+  </mat-stepper>
 </form>

 <h3>Linear Horizontal Stepper Demo using a different form for each step</h3>


The rest of this file should be updated with the new stepper.

Not necessarily. The separate horizontal/vertical steppers are still valid use cases.

Got it, that makes sense.

jelbourn · 2018-01-03T18:09:05Z

So, my reason for wanting to make separate steppers was that there can be more than just the two vertical and horizontal variants; there are a couple other layouts some Google applications use. Baking them all into one would balloon the complexity.

What if we did some kind of dynamic stepper that delegates between them for you while still maintaining the separate implementations as standalone components?

crisbeto · 2018-01-03T18:22:54Z

That would probably end up being an ngSwitch between the different variants anyway (which is what it does here) @jelbourn. I went with this approach, because at least it allows us to re-use some of the templating for the individual steps.

mmalerba · 2018-01-25T23:14:46Z

needs rebase

jelbourn · 2018-01-26T00:09:18Z

Thinking about this more, there are upcoming Angular features that would make this easier / better optimizable. We might want to wait for that (probably v7) before committing to this.

danielpiedra · 2018-02-05T17:06:43Z

@jelbourn is still the idea to wait until angular v7?

jelbourn · 2018-02-05T17:16:56Z

It's not set in stone, but there are potential features on the Angular roadmap that would make this a lot easier to do (and in such a way that it can be optimized better).

danielpiedra · 2018-02-05T17:18:32Z

reasonable enough, we wait. thanks.

paulogr · 2018-03-05T20:27:02Z

What about change the horizontal to work like in guidelines on mobile?

https://material.io/guidelines/components/steppers.html#steppers-types-of-steps

Is that the right approach?

GuerricPhalippou · 2018-10-19T09:24:38Z

v7 is out! Are there news about this issue?

eduardoschonhofen · 2019-02-26T19:10:19Z

Hi! Any news? This would be really useful,since using *ngIf to switch between horizontal and vertical make duplicates of the components in the steps.

ManuelGraf · 2019-04-04T14:04:26Z

come on... This has been a problem for a super long time and is still not adressed? its like you dont want people to use angular material.... will this be addressed in 8.0 beta at least?
having this as seperate components makes no sense. If there are other steppers you want to offer, make components for them as soon as thyre supported. the regular one-direction stepper shoul have two orientations (RESPONSIVENESS!). I can't think of any reason not to do that.
If it was at least possible to just use templateoutet and templateref - those would suffice to fix the issue that if i want to change orientation of the stepper during runtime i have to duplicate the whole content. this is BS!

grant77 · 2019-04-26T00:36:44Z

I literally just finished writing this and, y 8000 es, it is a bit hacky. This has not been tested at all. Use at own risk.

import { Directionality } from '@angular/cdk/bidi';
import { CdkStep, StepperSelectionEvent } from '@angular/cdk/stepper';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, Input, Optional, Output, QueryList, ViewChildren } from '@angular/core';
import { MatStep, MatStepper } from '@angular/material';
import { DOCUMENT } from '@angular/platform-browser';

const MAT_STEPPER_PROXY_FACTORY_PROVIDER = {
    provide: MatStepper,
    deps: [forwardRef(() => StepperComponent), [new Optional(), Directionality], ChangeDetectorRef, [new Inject(DOCUMENT)]],
    useFactory: MAT_STEPPER_PROXY_FACTORY
};

export function MAT_STEPPER_PROXY_FACTORY(component: StepperComponent, directionality: Directionality,
    changeDetectorRef: ChangeDetectorRef, docuement: Document) {
    // We create a fake stepper primarily so we can generate a proxy from it.  The fake one, however, is used until 
    // our view is initialized.  The reason we need a proxy is so we can toggle between our 2 steppers 
    // (vertical and horizontal) depending on  our "orientation" property.  Probably a good idea to include a polyfill 
    // for the Proxy class: https://github.com/GoogleChrome/proxy-polyfill.

    const elementRef = new ElementRef(document.createElement('mat-horizontal-stepper'));
    const stepper = new MatStepper(directionality, changeDetectorRef, elementRef, document);
    return new Proxy(stepper, {
        get: (target, property) => Reflect.get(component.stepper || target, property),
        set: (target, property, value) => Reflect.set(component.stepper || target, property, value)
    });
}

@Component({
    selector: 'app-stepper',
    // templateUrl: './stepper.component.html',
    // styleUrls: ['./stepper.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
    providers: [MAT_STEPPER_PROXY_FACTORY_PROVIDER],
    template: `
<ng-container [ngSwitch]="orientation">
    <mat-horizontal-stepper *ngSwitchCase="'horizontal'"
                            [labelPosition]="labelPosition"
                            [linear]="linear"
                            [selected]="selected"
                            [selectedIndex]="selectedIndex"
                            (animationDone)="animationDone.emit($event)"
                            (selectionChange)="selectionChange.emit($event)">
    </mat-horizontal-stepper>


    <mat-vertical-stepper *ngSwitchDefault
                            [linear]="linear"
                            [selected]="selected"
                            [selectedIndex]="selectedIndex"
                            (animationDone)="animationDone.emit($event)"
                            (selectionChange)="selectionChange.emit($event)">
    </mat-vertical-stepper>
</ng-container>
`
})
export class StepperComponent {
    // public properties
    @Input() labelPosition?: 'bottom' | 'end';
    @Input() linear?: boolean;
    @Input() orientation?: 'horizontal' | 'vertical';
    @Input() selected?: CdkStep;
    @Input() selectedIndex?: number;

    // public events
    @Output() animationDone = new EventEmitter<void>();
    @Output() selectionChange = new EventEmitter<StepperSelectionEvent>();

    // internal properties
    @ViewChildren(MatStepper) stepperList!: QueryList<MatStepper>;
    @ContentChildren(MatStep) steps!: QueryList<MatStep>;
    get stepper(): MatStepper { return this.stepperList && this.stepperList.first; }

    // private properties
    private lastSelectedIndex?: number;
    private needsFocus = false;
    
    // public methods
    constructor(private changeDetectorRef: ChangeDetectorRef) { }
    ngAfterViewInit() {
        this.reset();
        this.stepperList.changes.subscribe(() => this.reset());
        this.selectionChange.subscribe((e: StepperSelectionEvent) => this.lastSelectedIndex = e.selectedIndex);
    }
    ngAfterViewChecked() {
        if (this.needsFocus) {
            this.needsFocus = false;
            const { _elementRef, _keyManager, selectedIndex } = <any>this.stepper;
            _elementRef.nativeElement.focus();
            _keyManager.setActiveItem(selectedIndex);
        }
    }

    // private properties
    private reset() {
        const { stepper, steps, changeDetectorRef, lastSelectedIndex } = this;
        stepper.steps.reset(steps.toArray());
        stepper.steps.notifyOnChanges();
        if (lastSelectedIndex) {
            stepper.selectedIndex = lastSelectedIndex;
        }

        Promise.resolve().then(() => {
            this.needsFocus = true;
            changeDetectorRef.markForCheck();
        });
    }
}

jrcasso · 2019-07-14T07:58:14Z

We're on Angular 8 now. I think it's time to revisit this functionality.

Right now, people are wanting different stepper layouts depending on device orientation or screen size. But the child component data gets lost during the transition with a simple switch between the two.

Frankly, I think it's odd that you went this direction in the first place. It may have been a complex component, but to think that this wouldn't be a desired behavior for the component on mobile devices is shortsighted. Optimization should have been secondary to functionality expectations.

davideas · 2019-10-28T22:35:59Z

@grant77, currently we receive this error when using it:
No provider for CdkStepper!.
Do we need some provider declaration?

And now DOCUMENT is now: import { DOCUMENT } from '@angular/common';

grant77 · 2019-11-01T19:18:24Z

@davideas, Here is an updated version:

import { Directionality } from '@angular/cdk/bidi';
import { CdkStep, StepperSelectionEvent, CdkStepper } from '@angular/cdk/stepper';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, forwardRef, Inject, Input, Optional, Output, QueryList, ViewChildren, TypeProvider, Type } from '@angular/core';
import { MatStep, MatStepper } from '@angular/material';
import { DOCUMENT } from '@angular/common';

const MAT_STEPPER_PROXY_FACTORY_PROVIDER = {
  provide: MatStepper,
  deps: [forwardRef(() => StepperComponent), [new Optional(), Directionality], ChangeDetectorRef, [new Inject(DOCUMENT)]],
  useFactory: MAT_STEPPER_PROXY_FACTORY
};

const CDK_STEPPER_PROXY_FACTORY_PROVIDER = { ...MAT_STEPPER_PROXY_FACTORY_PROVIDER, provide: CdkStepper }

export function MAT_STEPPER_PROXY_FACTORY(component: StepperComponent, directionality: Directionality,
  changeDetectorRef: ChangeDetectorRef, docuement: Document) {
  // We create a fake stepper primarily so we can generate a proxy from it.  The fake one, however, is used until 
  // our view is initialized.  The reason we need a proxy is so we can toggle between our 2 steppers 
  // (vertical and horizontal) depending on  our "orientation" property.  Probably a good idea to include a polyfill 
  // for the Proxy class: https://github.com/GoogleChrome/proxy-polyfill.

  const elementRef = new ElementRef(document.createElement('mat-horizontal-stepper'));
  const stepper = new MatStepper(directionality, changeDetectorRef, elementRef, document);
  return new Proxy(stepper, {
    get: (target, property) => Reflect.get(component.stepper || target, property),
    set: (target, property, value) => Reflect.set(component.stepper || target, property, value)
  });
}

@Component({
  selector: 'app-stepper',
  // templateUrl: './stepper.component.html',
  // styleUrls: ['./stepper.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [
    MAT_STEPPER_PROXY_FACTORY_PROVIDER,
    CDK_STEPPER_PROXY_FACTORY_PROVIDER
  ],
  template: `
<ng-container [ngSwitch]="orientation">
    <mat-horizontal-stepper *ngSwitchCase="'horizontal'"
                            [labelPosition]="labelPosition"
                            [linear]="linear"
                            [selected]="selected"
                            [selectedIndex]="selectedIndex"
                            (animationDone)="animationDone.emit($event)"
                            (selectionChange)="selectionChange.emit($event)">
    </mat-horizontal-stepper>


    <mat-vertical-stepper *ngSwitchDefault
                            [linear]="linear"
                            [selected]="selected"
                            [selectedIndex]="selectedIndex"
                            (animationDone)="animationDone.emit($event)"
                            (selectionChange)="selectionChange.emit($event)">
    </mat-vertical-stepper>
</ng-container>
`
})
export class StepperComponent {
  // public properties
  @Input() labelPosition?: 'bottom' | 'end';
  @Input() linear?: boolean;
  @Input() orientation?: 'horizontal' | 'vertical';
  @Input() selected?: CdkStep;
  @Input() selectedIndex?: number;

  // public events
  @Output() animationDone = new EventEmitter<void>();
  @Output() selectionChange = new EventEmitter<StepperSelectionEvent>();

  // internal properties
  @ViewChildren(MatStepper) stepperList!: QueryList<MatStepper>;
  @ContentChildren(MatStep) steps!: QueryList<MatStep>;
  get stepper(): MatStepper { return this.stepperList && this.stepperList.first; }

  // private properties
  private lastSelectedIndex?: number;
  private needsFocus = false;

  // public methods
  constructor(private changeDetectorRef: ChangeDetectorRef) { }
  ngAfterViewInit() {
    this.reset();
    this.stepperList.changes.subscribe(() => this.reset());
    this.selectionChange.subscribe((e: StepperSelectionEvent) => this.lastSelectedIndex = e.selectedIndex);
  }
  ngAfterViewChecked() {
    if (this.needsFocus) {
      this.needsFocus = false;
      const { _elementRef, _keyManager, selectedIndex } = <any>this.stepper;
      _elementRef.nativeElement.focus();
      _keyManager.setActiveItem(selectedIndex);
    }
  }

  // private properties
  private reset() {
    const { stepper, steps, changeDetectorRef, lastSelectedIndex } = this;
    stepper.steps.reset(steps.toArray());
    stepper.steps.notifyOnChanges();
    if (lastSelectedIndex) {
      stepper.selectedIndex = lastSelectedIndex;
    }

    Promise.resolve().then(() => {
      this.needsFocus = true;
      changeDetectorRef.markForCheck();
    });
  }
}

davideas · 2019-11-02T20:09:10Z

@grant77 Thank you, it works really great! I created a gist with some more fixes and a nice feature:

Angular 8.x Responsive Stepper with headers disable feature

responsive-stepper.component.ts

hanktrizz · 2020-09-11T14:42:06Z

Hi, it's v10 now. I'm just wondering what the status of this feature is in the pipeline? It'll be nice to know if it will be supported or not at all as it'll provide some closure rather than waiting for updates to this issue endlessly.

Combines `mat-vertical-stepper` and `mat-horizontal-stepper` into a single `mat-stepper` class in order to allow for the orientation to be changed dynamically. Also deprecates `MatVerticalStepper` and `MatHorizontalStepper`. This is a reimplementation of angular#9173, however this time I took a different approach which should make it easier to maintain and eventually remove the two separate steppers. It should result in a smaller bundle as well. The main differences are: 1. Rather than have 3 components (`MatStepper`, `MatVerticalStepper` and `MatHorizontalStepper`), these changes combine everything into `MatStepper` while `MatVerticalStepper` and `MatHorizontalStepper` are only used as injection tokens for backwards compatibility. The `selector` and `exportAs` of `MatStepper` is changed to match the two individual steppers and the orientation is inferred from the tag name. This will make it much easier to remove the deprecated directives. Furthermore, it should result in a smaller bundle since the template and styles only need to be inlined in one place. 2. `MatVerticalStepper` and `MatHorizontalStepper` are turned into very basic directives that have the same public API as `MatStepper` and they proxy everything to it. This is primarily so that if somebody managed to get a hold of a `MatVerticalStepper` or `MatHorizontalStepper` instance, or they used the old classes to type their own code, it wouldn't result in a breaking change. Relates to angular#7700.

crisbeto · 2021-03-07T09:12:34Z

We've decided to revisit the feature, however rebasing this PR is going to take a while and there are better ways of achieving the same result now. I'm closing it in favor of #22139.

Combines `mat-vertical-stepper` and `mat-horizontal-stepper` into a single `mat-stepper` class in order to allow for the orientation to be changed dynamically. Also deprecates `MatVerticalStepper` and `MatHorizontalStepper`. This is a reimplementation of angular#9173, however this time I took a different approach which should make it easier to maintain and eventually remove the two separate steppers. It should result in a smaller bundle as well. The main differences are: 1. Rather than have 3 components (`MatStepper`, `MatVerticalStepper` and `MatHorizontalStepper`), these changes combine everything into `MatStepper` while `MatVerticalStepper` and `MatHorizontalStepper` are only used as injection tokens for backwards compatibility. The `selector` and `exportAs` of `MatStepper` is changed to match the two individual steppers and the orientation is inferred from the tag name. This will make it much easier to remove the deprecated directives. Furthermore, it should result in a smaller bundle since the template and styles only need to be inlined in one place. 2. `MatVerticalStepper` and `MatHorizontalStepper` are turned into very basic directives that have the same public API as `MatStepper` and they proxy everything to it. This is primarily so that if somebody managed to get a hold of a `MatVerticalStepper` or `MatHorizontalStepper` instance, or they used the old classes to type their own code, it wouldn't result in a breaking change. Relates to angular#7700.

…ly (#22139) Combines `mat-vertical-stepper` and `mat-horizontal-stepper` into a single `mat-stepper` class in order to allow for the orientation to be changed dynamically. Also deprecates `MatVerticalStepper` and `MatHorizontalStepper`. This is a reimplementation of #9173, however this time I took a different approach which should make it easier to maintain and eventually remove the two separate steppers. It should result in a smaller bundle as well. The main differences are: 1. Rather than have 3 components (`MatStepper`, `MatVerticalStepper` and `MatHorizontalStepper`), these changes combine everything into `MatStepper` while `MatVerticalStepper` and `MatHorizontalStepper` are only used as injection tokens for backwards compatibility. The `selector` and `exportAs` of `MatStepper` is changed to match the two individual steppers and the orientation is inferred from the tag name. This will make it much easier to remove the deprecated directives. Furthermore, it should result in a smaller bundle since the template and styles only need to be inlined in one place. 2. `MatVerticalStepper` and `MatHorizontalStepper` are turned into very basic directives that have the same public API as `MatStepper` and they proxy everything to it. This is primarily so that if somebody managed to get a hold of a `MatVerticalStepper` or `MatHorizontalStepper` instance, or they used the old classes to type their own code, it wouldn't result in a breaking change. Relates to #7700.

angular-automatic-lock-bot · 2021-04-07T00:04:45Z

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.}

crisbeto added the pr: needs review label Dec 30, 2017

crisbeto assigned jelbourn and mmalerba Dec 30, 2017

crisbeto requested a review from mmalerba as a code owner December 30, 2017 19:41

googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 30, 2017

crisbeto force-pushed the 7700/stepper-orientation branch from acdd568 to 3655323 Compare December 31, 2017 06:06

kbo4sho reviewed Jan 3, 2018

View reviewed changes

mmalerba added the pr: needs rebase label Jan 25, 2018

crisbeto added blocked This issue is blocked by some external factor, such as a prerequisite PR target: major This PR is targeted for the next major release labels Jan 26, 2018

mmalerba removed their request for review March 8, 2018 18:15

mmalerba removed their assignment Mar 8, 2018

jelbourn removed the pr: needs review label May 14, 2018

crisbeto mentioned this pull request Sep 15, 2018

Set material stepper to horizontal or vertical based on attribute #13144

Closed

This comment has been minimized.

Sign in to view

crisbeto mentioned this pull request Feb 16, 2019

Mat-Stepper horizontal and vertical as directive #15143

Closed

mmalerba added aaa and removed aaa labels Apr 25, 2019

This comment has been minimized.

Sign in to view

crisbeto mentioned this pull request Mar 7, 2021

feat(material/stepper): allow for orientation to be changed dynamically #22139

Merged

crisbeto closed this Mar 7, 2021

angular-automatic-lock-bot bot locked and limited conversation to collaborators Apr 7, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(stepper): allow for orientation to be changed dynamically #9173

feat(stepper): allow for orientation to be changed dynamically #9173

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

Uh oh!

Uh oh!

Uh oh!

feat(stepper): allow for orientation to be changed dynamically #9173

feat(stepper): allow for orientation to be changed dynamically #9173

Uh oh!

Conversation

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment has been minimized.

This comment has been minimized.

Uh oh!

Uh oh!

Uh oh!

Uh oh!