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
1 Answers
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 }
}
]
})
Related