angularangular-materialangular-material-stepper

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


Solution

  • 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