Ionic ng-if comparing values

Question

I’m getting data on a API and I intend to check if percent_change_1h is less than 0, and if so displays a different text color.

  <ion-row>
    <ion-col>
      <ion-label ng-if="top.percent_change_1h < 0" style="color: #b21a91;">
        <b>1H: </b>{{top.percent_change_1h}}
      </ion-label>
      <ion-label ng-if="top.percent_change_1h > 0">
        <b>1H: </b>{{top.percent_change_1h}}
      </ion-label>
    </ion-col>
  </ion-row>

How can I make this process of comparison, in case less than 0 present a color, and if it is greater than or equal to zero present another?

Answer 1

You can use ng-class!

Basically, it works as follows: You pass one condition to him, and if that condition is true, he applies that class, if not, he applies another. So what you should do is:

1. Define conditional expression ("if X is less than 2");
2. Create the true condition class;
3. Create the false condition class;
4. Relate all this in ng-class of the element that will paint.

Example: (Will paint the ion-label BACKGROUND, not the letters)

.maiorQueZero {
  background-color: #006600;
}
.menorQueZero {
  background-color: #ff0000;
}

  <ion-row>
    <ion-col>
      <ion-label ng-class="top.percent_change_1h > 0? 'maiorQueZero' : 'menorQueZero' ">
      
      <!-- Se top.percent_change_1h for maior que 0, aplica a classe 'maiorQueZero', se não (:) aplica o menorQueZero-->
      
        <b>1H: </b>{{top.percent_change_1h}}
      </ion-label>
    </ion-col>
  </ion-row>