CODEWITHSUNDEEP
htmlcssangulartypescript
Amrmsmb
Amrmsmb

Reputation: 11416

How to change color of a badge programmatically

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 class="badge badge-purple">{{percVLRiskTotal}} <span class="clr-sr-only"></span></span>

Upvotes: 0

Views: 149

Answers (3)

sidharth sid
sidharth sid

Reputation: 25

There are many methods to achieve. This here I think you can use the ngStyle directive provided by angular

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

Upvotes: 0

Rasekh Moafi
Rasekh Moafi

Reputation: 1

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' }"

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97282

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

<span class="badge" [class.badge-green]="percVLRiskTotal === 1000">
    {{percVLRiskTotal}} <span class="clr-sr-only">
</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.

Upvotes: 2

Related Questions