In my Angular 5 project, I am using a material progress bar and hoping to customize the colors based on the percentage progress. Despite trying various methods from other sources (including previous SO questions), I have been unsuccessful in getting it to work properly. Here is the snippet of HTML code I am working with:
<mat-progress-bar *ngIf="cell.name === 'progress'" [value]="cell.value"
class="mat-progress-bar-round my-color" [ngClass]="'color ' + ((cell.value <=
30) ? 'color-red' : (cell.value < 70) ? 'color-yellow' : 'color-green')">
</mat-progress-bar>
Below is the corresponding sass (css) code:
mat-progress-bar {
&.mat-progress-bar-big {
padding: 13px 0;
}
&.mat-progress-bar-round {
border-radius: 11px;
height: 6px;
.mat-progress-bar-buffer {
background-color: $grey3;
}
.mat-progress-bar-fill {
&::after {
border-radius: 11px;
}
}
&.color {
.mat-progress-bar-fill {
&::after {
animation: none;
content: '';
display: inline-block;
left: 0;
}
}
&.color-red {
......
}
&.color-yellow {
......
}
&.color-green {
......
}
&.color-aqua {
......
}
}
}
}
Your assistance in resolving this issue would be greatly appreciated! 😊