CODEWITHSUNDEEP
angularangular-materialangular-material-stepper
Matthieu Raynaud de Fitte
Matthieu Raynaud de Fitte

Reputation: 2459

Angular material stepper remove numbers

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

Upvotes: 8

Views: 9134

Answers (2)

RED-ONE
RED-ONE

Reputation: 435

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

Upvotes: 2

Gustavo Damazio
Gustavo Damazio

Reputation: 126

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

Upvotes: 5

Related Questions