How to give color to h2 based on positve or negative number angular 4

Question

Based on the result the number itself should have a specific color. When the number is negative, the boolean should give them a classname negative so the number will be red else classname positive which is a green color.

.negative {
  color: red;
}

.positive {
  color: green;
}

<tr>
  <td>Totale Inkomsten</td>
  <td ng-model="totalcost">{{ totalCost() }}</td> 
  <td>Totale Uitgaven</td>
  <td ng-model="totalexpense">{{ totalExpense() }}</td>
</tr>

<h2 ng-class="totalcost < totalexpense? 'negative': 'positve'">{{ totalCost() - totalExpense() }} </h2>

With Angular 2 and above you have to use ngClass directive as a property binding. The way you are using it now will not work with Angular 4 — Saurabh Tiwari, May 05 '17 at 06:29
U might want to have look at property binding with angular 4. This should help: https://www.youtube.com/watch?v=GLh9MgdyYZk&index=12&list=PL0t62Ej_QmbEfSKlJg4uGRMYX2oq2sP6P — Saurabh Tiwari, May 05 '17 at 06:32
thought there was a simpler way to fix that instead of using an iteration — , May 05 '17 at 06:34
You do not have to iterate anything here. Just need to change the way you are using ngClass with Angular. Looking at your code makes me feel its an AngularJS code rather than Angular 4 — Saurabh Tiwari, May 05 '17 at 06:36

score 1 · Answer 1 · answered May 05 '17 at 06:39

1

With Angular 2, the way of using ngClass has changed. Now you should use it as a property binding like :

<h2 [ngClass]="{'negative': totalcost < totalexpense, 'positve' : totalcost > totalexpense">{{ totalCost() - totalExpense() }} </h2>

If you have other things in place, this should give you the desired result.

answered May 05 '17 at 06:39

Saurabh Tiwari

4,632
9
42
82

I assume the binding does not give an error, but it would not assign the className to it... – May 05 '17 at 06:41
It should assign the class as long as the class is properly defined and the corresponding css file is loaded. Try checking if your class is applied or not by inspecting the element. May be its getting overridden somewhere. – Saurabh Tiwari May 05 '17 at 06:43
1029.05 – May 05 '17 at 06:44
This should not be the case normally. Are you having any console errors. ? – Saurabh Tiwari May 05 '17 at 06:46
console is clean as hell :P – May 05 '17 at 06:47
This `
1029.05
` is fine. And this also means that your class object got applied. I just realized you had a different spelling of `positive` in html and css. Can that be the case. Check with a negative value once – Saurabh Tiwari May 05 '17 at 06:49
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/143462/discussion-between-fronteerder-and-saurabh-tiwari). – May 05 '17 at 06:54

How to give color to h2 based on positve or negative number angular 4

1 Answers1

1029.05

Linked