CODEWITHSUNDEEP
cssangulartypescript
user2382953
user2382953

Reputation: 47

how to change angular stepper progress color when next step active

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

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.

Upvotes: 3

Views: 1445

Answers (2)

Mallikarjuna Muraboina
Mallikarjuna Muraboina

Reputation: 1

.mat-stepper-horizontal-line,
.mat-horizontal-stepper-header::after,
.mat-horizontal-stepper-header::before {
  top: 27px !important;
  border-top-width: 5px !important;
  transition: background-color 0.3s ease, width 0.3s ease;
}
.mat-step-header[ng-reflect-state="done"]::after,
.mat-step-header[ng-reflect-state="done"]+ .mat-step-header[ng-reflect-state="done"]::before {
  background: green !important;
  transition: background-color 0.5s ease, width 0.5s ease; 
}
.mat-step-header[ng-reflect-state="done"] + .mat-stepper-horizontal-line {
  background: green;
  transition: background-color 0.5s ease; 
}
.mat-step-header[ng-reflect-selected="true"]::before,.mat-step-header[ng-reflect-state="done"]::before{
  background: green;
}
Angular 15
Please check this it will help you out

Upvotes: 0

yurzui
yurzui

Reputation: 214085

You can simulate select all elements before behavior with the help of general sibling combinator (~) :

.mat-step-header {
    background-color: #07C496 !important;
}

.mat-step-header[aria-selected="true"] ~ * {
    background-color: transparent !important;
}

Stackblitz Example

Upvotes: 1

Related Questions