How to change color of a badge programmatically-CodePudding

i would like to know how can i change the color of a badge programmtically in angular. i would like to be able to set the color of the badge initially to white and if the percVLRiskTotal is equal a specific value, then the color of the badge should be set to green for an example.

css:

<span >{{percVLRiskTotal}} <span ></span></span>

CodePudding user response：

There are multiple ways to set a style class conditionally in Angular. For your case, you could do something like:

<span  [class.badge-green]="percVLRiskTotal === 1000">
    {{percVLRiskTotal}} <span >
</span>

This will apply the class named badge-green to the span element if the value of the percVLRiskTotal property equals 1,000.

More information can be found here.

CodePudding user response：

based on your sample I think u can use ngClass like this:

[ngClass]="{'badge-purple': yourCondition === 'Option'}"

or for multiple conditions:

[ngClass]="{'badge-purple': yourCondition1 === 'Option1', 'badge-red' : yourCondition2 === 'Option2' }"

CodePudding user response：

There are many methods to achieve this , Here I think you can use the ngStyle directive provided by angular,

<span  [ngStyle]="{'background-color': percVLRiskTotal == 50 ? 'green':'blue'}">{{percVLRiskTotal}} <span ></span>