如何动态改变primeNG进度背景？

Question

I'm working with the primeNG progress component and I would like to change the color of the progress bar depending on the value. So 25% 25% is blue and 75% is green.

I've found that I can override the given color with:

.delay .progressBarDelay .ui-progressbar .ui-progressbar-value {
    background: red;
}

the HTML:

<div class="delay">
    <p>{{list.delay}}</p>                
    <div><p-progressBar class="progressBarDelay" [value]="list.value" [showValue]="false"></p-progressBar></div>
</div>

But now all the elements are red. And I have multiple progress bars. Is there a way to set the background color depending on the given value?

Answer 1

you can change class depending on value, it think so, something like this:-

<p-progressBar [ngClass]="{'progressBar-green': list.value > 50, 'progresbar-red': list.value < 50}" [value]="list.value" [showValue]="false"></p-progressBar>

You can pass a function to ngClass where you can define your logic.