Components: Stepper header without icons

Created on 21 Mar 2018 · 4Comments · Source: angular/components

Bug, feature request, or proposal:

Bug/feature request

What is the expected behavior?

Just display numbers in stepper headers

What is the current behavior?

Tries to display "create" in the icon after changing to another step

What are the steps to reproduce?

https://stackblitz.com/edit/angular-vpoj5j you can see it here

What is the use-case or motivation for changing an existing behavior?

Not everyone uses the icons

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Current. 5.2.4

Is there anything else we should know?

I know I can override the icons, however I'm unsure about changing it to always using the 'number' state.
The UX of changing the stepper to these icons doesn't really appeal to me.

P3 feature has pr

Source

narthur157

👍1

Most helpful comment

There is a simple enough workaround, but it is not especially pretty:

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;


ngAfterViewInit() {
  this.stepper._getIndicatorType = () => 'number';
}

It is actually sort of frightening that this is permissible by ts

narthur157 on 21 Mar 2018

👍8 😄2

All 4 comments

There is a simple enough workaround, but it is not especially pretty:

@ViewChild(MatHorizontalStepper) stepper: MatHorizontalStepper;


ngAfterViewInit() {
  this.stepper._getIndicatorType = () => 'number';
}

It is actually sort of frightening that this is permissible by ts

narthur157 on 21 Mar 2018

👍8 😄2

I think we could allow more flexibility with matStepperIcon if we added a let- binding on the directive so that people can have access to the step in the icon template. That should be able to support this use case as well as other things people may want to do. We should also allow people to specify a custom icon for the number steps, if we don't do that already. I think it only supports overriding edit and complete right now.

@crisbeto this sound reasonable to you?

mmalerba on 21 Mar 2018

I avoided adding the ability to override the number icon, because I wasn't sure how people would be able to do custom numbering @mmalerba, but your suggestion for adding a template context variable would work.

@narthur157 you can still replace the edit and done icons with blank ones. Note that the feature was added in Material 5.2.0, whereas your example is based on 5.1.0:

<mat-horizontal-stepper>
  <ng-template matStepperIcon="edit"></ng-template>
  <ng-template matStepperIcon="done"></ng-template>

  <mat-step>...</mat-step>
</mat-horizontal-stepper>