how to change angular stepper progress color when next step active

i am trying to do a progression stepper as shown in this image

this is my code in css

.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 thing works in developement mode only and but doesn't work in prod mode cause ng-reflect-active doesnt exists in prod mode. can anyone help me to do this in css only pls.

Continue reading...