Angular material stepper next step showing create instead of 1

Question

I am working on stepper, i want to disable next step until all filled should be filled so i made linear to true in html file

<mat-horizontal-stepper [linear]="true" #stepper>
        <mat-step [stepControl]="firstFormGroup">
          <form [formGroup]="firstFormGroup">

it's working fine but whenever i am going to next step, "1" becomes "cre" on inspecting i got

i didn't user create anywhere in my code it's coming from mat-icon

try to set [completed]="false" on mat-step to get only numbers. — Fateme Fazli, Jul 06 '18 at 16:24
Just go over looking at the entire mat-stepper mat-step and boom it is fixed. It is likely tied up to wrong enclosing tags. — Dimitri Leite, Jun 18 '21 at 14:45

score 36 · Answer 1 · answered Jul 06 '18 at 16:27

36

you can set [completed]="false" on mat-step and you will have only numbers instead of icons.

or to replace the word "create" with the pen icon you need to add the google material font icon link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

answered Jul 06 '18 at 16:27

Fateme Fazli

11,582
2
31
48

@ShivGaurav your welcome shiv.material should add a property for showing numbers not just icons. – Fateme Fazli Jul 06 '18 at 17:05
1

[completed]="false" Doesn't allow to navigate to next step :( – Umesh Patadiya Apr 19 '19 at 08:46
1

Using [completed]="false" is not correct. From the Angular docs: "passing in the completed property to each of the steps, won't allow the user to continue until it becomes true. " – Francesco Aug 30 '19 at 13:01
google material font icon link works for me, thanks – Romil Patel Oct 11 '19 at 17:04
Thanks, Works it after hours of trying nonsense. <3 – Sujeewa K. Abeysinghe Jun 12 '23 at 12:17

Saad Qamar · Answer 2 · 2020-07-04T13:51:12.880

10

add #stepper in mat-horizontal-stepper

<mat-horizontal-stepper [linear]="true" #stepper>
....
</mat-horizontal-stepper>

then in .ts file get that stepper

@ViewChild('stepper') stepper: MatHorizontalStepper;

and lastly, do it in afterViewInit

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

edited Jul 04 '20 at 13:51

answered Apr 27 '20 at 11:58

Saad Qamar

1,039
9
9

It should just be `@ViewChild('stepper') stepper: MatHorizontalStepper;` and it works like a charm. – Urke Jul 04 '20 at 13:02
From another post (https://stackoverflow.com/questions/60876479/angular-9-remove-default-icon-create-on-angular-material-stepper): I did this (more type complete): `this.stepper._getIndicatorType = (): string => STEP_STATE.NUMBER;` – Russ Feb 08 '21 at 06:05

score 1 · Answer 3 · edited Feb 20 '19 at 07:05

1

Probably you use another font-family instead default. You can solve this issue with fix 'Material Icon' for font-family in pages that use the stepper.

:host /deep/ .material-icons {
  font-family: 'Material Icons' !important;
}

edited Feb 20 '19 at 07:05

Roman Patutin

2,171
4
23
27

answered Feb 20 '19 at 06:17

Rouhollah Torshizi

151
2
8

Angular material stepper next step showing create instead of 1

3 Answers3

Linked