CODEWITHSUNDEEP
cssangularhtml-tableconditional-statementsbackground-color
Ivosein
Ivosein

Reputation: 63

CSS td conditional background color setting

Suppose I have the following angular table

  <table>
    <tr *ngFor="let company of investTable; let i = index">
      <td>
       {{company.name}}
      </td>
      <td>
       {{company.price}}
      </td>
      <td>
       {{company.profit}}
      </td>
    </tr>
  </table>

How can I make a neat solution to have table cells have a background color depending on the cell value ? lets say if company profit is positive, make it green.

Upvotes: 2

Views: 1408

Answers (3)

Barremian
Barremian

Reputation: 31125

Look into ngStyle and ngClass. Simplest use case would be to directly bind to the style property.

<table>
  <tr *ngFor="let company of investTable; let i = index">
    <td>
      {{company.name}}
    </td>
    <td>
      {{company.price}}
    </td>
    <td [style.background-color]="company?.profit > 5 ? 'green' : 'red'">
      {{company.profit}}
    </td>
  </tr>
</table>

Upvotes: 1

Baptiste Borel
Baptiste Borel

Reputation: 121

You can add this to your html :

<td [style.positive]="company.profit > 0">

and this to your css : 

td.positive{
  background-color: green;
}

Upvotes: 1

Aakash Garg
Aakash Garg

Reputation: 10979

in css

td.highlight {
  background-color: green;
}

in html :- 

<table>
    <tr *ngFor="let company of investTable; let i = index">
      <td>
       {{company.price}}
      </td>
      <td [ngClass]="{'highlight': company.profit > 0}">
       {{company.profit}}
      </td>
    </tr>
  </table>

Upvotes: 3

Related Questions