I'm attempting to create a progress stepper similar to the one shown in this image: https://i.sstatic.net/jzT0i.png
Below is my CSS code:
.mat-step-header[aria-selected="true"] {
background-color: #07C496;
}
.mat-step-header[ng-reflect-active='true']{
background-color: #07C496;
}
HTML:
<mat-horizontal-stepper #stepper labelPosition="bottom" linear >
<ng-template matStepperIcon="edit" let-index="index"> {{index + 1}}
</ng-template>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
<mat-step>
<ng-template matStepLabel>test</ng-template>
<div>
</mat-step>
</mat-horizontal-stepper>
This setup works in development mode but not in production mode because `ng-reflect-active` doesn't exist. I need help achieving this using only CSS. Thank you.