How can I display any string or text instead of stepper index numbers in mat-stepper material angular version 13

Question

Trying this one but not working

 ::ng-deep .mat-horizontal-stepper-header .mat-step-icon-content:nth-child(1)::after {
     content: 'A';
 }

 ::ng-deep .mat-horizontal-stepper-header .mat-step-icon-content:nth-child(2)::after {
     content: 'B';
 }

 ::ng-deep .mat-horizontal-stepper-header .mat-step-icon-content:nth-child(3)::after {
     content: 'C';
 }

 ::ng-deep .mat-horizontal-stepper-header .mat-step-icon-content:nth-child(4)::after {
     content: 'D';
 }

ITs giving A1 A2 A3 A4 but it should give A B C D

Answer 1

Try to avoid using ::ng-deep. It's deprecated.

You can solve your problem by using custom <ng-template> elements. Just define your custom matStepperIcon (see documentation) for the number.

Create a stepper with the custom ng-templpate as follows:

<mat-horizontal-stepper #stepper>
  <ng-template matStepperIcon="number" let-index="index">{{getStepHeader(index)}} </ng-template>
  <mat-step [stepControl]="formGroup">
    <ng-template matStepLabel>First Step</ng-template>
  </mat-step>
  <mat-step [stepControl]="formGroup">
    <ng-template matStepLabel>Second Step</ng-template>
  </mat-step>
  <mat-step [stepControl]="formGroup">
    <ng-template matStepLabel>Third Step</ng-template>
  </mat-step>
</mat-horizontal-stepper>

Via let-index="index" you can access the index of the current step. In this example I created a simple method for the text in the component.ts like this:

export class ExampleSrepperComponent {

  formGroup = this._formBuilder.group({
    firstCtrl: ['', Validators.required],
  });

  constructor(private _formBuilder: FormBuilder) {}
  
  getStepHeader(index: number): string {
    if (index == 0) return "A"
    if (index == 1) return "B"
    if (index == 2) return "C"
    return "D"
  }
}