Angular material stepper remove numbers

Question

How can I remove the numbers from the Angular material stepper?

I do not wish to replace them with an icon, I wish to have an empty circle.

Edit : I am using angular 9

score 5 · Accepted Answer · edited Apr 26 '21 at 08:57

5

Inside the mat-step, insert these templates, thus replacing the number that is the default.

<mat-horizontal-stepper [linear]="true" #stepper>
  <!-- STEPS -->
  <mat-step label="First Step" state="your-state-name-here-1">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Second Step" state="your-state-name-here-2">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <mat-step label="Third Step" state="your-state-name-here-3">
    <div>
      <button mat-button matStepperNext>next</button>
    </div>
  </mat-step>
  <!-- STEPS -->

  <!-- Replace icon mat-step -->
  <ng-template matStepperIcon="your-state-name-here-1">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-2">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <ng-template matStepperIcon="your-state-name-here-3">
    <mat-icon>your-icon-name-or-blank</mat-icon>
  </ng-template>
  <!-- Replace icon mat-step -->
</mat-horizontal-stepper>

Obs: In order to use the custom step states, you must add the displayDefaultIndicatorType option to the global default stepper options which can be specified by providing a value for STEPPER_GLOBAL_OPTIONS in your application's root module or specific child module.

@NgModule({
  providers: [
    {
      provide: STEPPER_GLOBAL_OPTIONS,
      useValue: { displayDefaultIndicatorType: false }
    }
  ]
})

Official documentation

edited Apr 26 '21 at 08:57

Pac0

21,465
8
65
74

answered Jun 19 '20 at 00:02

Gustavo Damazio

86
6

I could not get this solution to work. Blindly coying your code did not change anything ( numbers still displayed ) and I am very uncertain of what to do with your last line of code – Matthieu Raynaud de Fitte Jun 19 '20 at 08:04
@MatthieuRaynauddeFitte, sorry, i forgot to mention this provider that you need to put in the module, i updated the answer, can you check if it works right? – Gustavo Damazio Jun 19 '20 at 09:20
sorry about the long delay. No it does not work and I do not understand why. It is possible that I have an interaction I am not understanding or seeing – Matthieu Raynaud de Fitte Jun 24 '20 at 22:48
to be more precise : I does work but only if I have selected the element. If unselected, it displays a white "done" text rather than nothing – Matthieu Raynaud de Fitte Jun 24 '20 at 22:50
ok found the complete solution with lots of documentation reading, fiddling and your answer, you where very close to the answer. For whatever reason, material absolutely wants to display an icon or a number but you can overload it with `icon-name-here`. The additional problem I had is that I did not have any icon imports so the "done" text I was complaining about was in fact the name of the icon it was trying to display. – Matthieu Raynaud de Fitte Jun 25 '20 at 00:06
you can see an example here : https://stackblitz.com/angular/dglpdlbvevg?file=src%2Fapp%2Fstepper-states-example.html could you edit your answer so that I can accept it ? – Matthieu Raynaud de Fitte Jun 25 '20 at 00:06
@MatthieuRaynauddeFitte, Thanks for your feedback, I thought you didn't want any icons that just wanted to remove the step numbers from the mat, the way I went through the example simulating that stackblitz link you passed me is an empty circle [link](https://i.imgur.com/vtooOml.png). I will update my answer. You can update your question and inform that you want to replace the number with an icon, I think the question was not very clear. – Gustavo Damazio Jun 25 '20 at 22:18
My bad, forgot to remove them. It works well if the `` is empty, I only get an empty circle. The reason they are there is to do an overload of the default ones ( that get displayed when no icons are given ). This way it works. So `icon-name-here` should be empty. Sorry about that ^^' – Matthieu Raynaud de Fitte Jun 26 '20 at 15:00
@MatthieuRaynauddeFitte, [example-img](https://i.imgur.com/vtooOml.png), As you can see in this image, I used the example you gave me from StackBlitz, leaving yourself without the mat-inside icon already has the same effect. Thank you for sharing your experience with me, I made one more adjustment to the question, could you mark it as an answer? – Gustavo Damazio Jun 26 '20 at 20:07
thank you for the answer and sorry for the confusions ^^ – Matthieu Raynaud de Fitte Jun 27 '20 at 00:13
not sure about the version of angular here, seems not to be old but it is not working any more (if ever did) – smoczyna Jan 27 '22 at 17:39
Is there a way to override the edit/done/number states this way? – metoyou May 17 '23 at 20:19

score 1 · Answer 2 · answered Nov 24 '22 at 14:01

1

Do not display number

::ng-deep .mat-step-icon-content { display: none !important; }

Do not display the circle and number

::ng-deep .mat-horizontal-stepper-header .mat-step-icon {
display: none !important;}

answered Nov 24 '22 at 14:01

RED-ONE

167
1
5

Angular material stepper remove numbers

2 Answers2