DEV Community


Angular Basics — NgClass

kritner profile image Russ Hammett Originally published at Medium on ・1 min read

Continuing on with my things learned from putting together series — the NgClass. I was having trouble really quickly “seeing” what the “good” and “bad” years were, due to varying percentage values of my solar projection. With this in mind, I thought it would be good to apply some shading to cells depending on the value within the call. This led me to NgClass

I’d like the cell to be shaded green when I’m making money on the solar panels (any positive number) and red when the panels are costing me more than just what the base utility cost would be (any negative number). With that, it was just a few steps:

  • Write CSS to represent the color change
  • Write a Typescript function to determine which class should be applied to a table cell
  • Write the NgClass logic within the view


.positive {
    background-color: lightgreen;

.negative {
    background-color: lightcoral;


public inTheGreen(value: number): boolean{
    if (value >= 0)
      return true;

    return false;

and the basic “template” to plug into my view

<td [ngClass]="{
  positive: inTheGreen(myVal),
  negative: !inTheGreen(myVal)
}">{{ myVal }}</td>

The entirety of the table section of code now is:

<table class='table'>
        <th>Total Cost Utility</th>
        <th>Avg. Cost/month (Utility)</th>
        <th>Cost/year 100% gen.</th>
        <th>Savings/year 100% gen.</th>
        <th>Cost/year 90% gen.</th>
        <th>Savings/year 90% gen.</th>
        <th>Cost/year 80% gen.</th>
        <th>Savings/year 80% gen.</th>
      <tr \*ngFor="let projection of solarProjection.futureProjection">
        <td>{{ projection.purchaseYear | indexOffset }}</td>
        <td>{{ projection.totalCost | currency }}</td>
        <td>{{ projection.averageCostPerMonth | currency }}</td>
        <td>{{ projection.costSolar100Percent | currency }}</td>
        <td [ngClass]="{
          positive: inTheGreen(projection.totalSavings100Percent),
          negative: !inTheGreen(projection.totalSavings100Percent)
        }">{{ projection.totalSavings100Percent | currency }}</td>
        <td>{{ projection.costSolar90Percent | currency }}</td>
        <td [ngClass]="{
          positive: inTheGreen(projection.totalSavings90Percent),
          negative: !inTheGreen(projection.totalSavings90Percent)
        }">{{ projection.totalSavings90Percent | currency }}</td>
        <td>{{ projection.costSolar80Percent | currency }}</td>
        <td [ngClass]="{
          positive: inTheGreen(projection.totalSavings80Percent),
          negative: !inTheGreen(projection.totalSavings80Percent)
        }">{{ projection.totalSavings80Percent | currency }}</td>

Result after applying NgClass shading

I’m not sure if there’s a way to combine the inTheGreen and !inTheGreen checks into a single call, or it if much matters, but it’s a little lengthy right now.

Next time, perhaps I’ll start digging into implementing some charting and/or utilizing a datagrid so it’s a little “prettier” and more interactive.


Discussion (1)

Editor guide
lucasmonstro profile image
Lucas Silva • Edited

Do not forget to memoize inTheGreen to have better performance. Very nice article ;)