Change element color based on codition HTML & CSS

Issue

I am trying to change the color backround of an element based on a condition. For example if number >2, color green. My css:

 .color-green {
    background-color: green;
    color: white;
   }

<h9>My number{{ data.number}}</h9>

I tried with ng-class but does not work. What am I missing here?

<td ng-class = "{'color-green':data.number>=2}"> <h9>My number {{ data.number}} </h9></td>

Or what would be the simplest way to achieve this?

Solution

Your changes do look correct, can you inspect in the browser to see if your class is getting applied on the element and if your defined class is accessible?

Answered By - mak15