Angular Basics — NgClass

#typescript #angular #programming #learningtocode

Continuing on with my things learned from putting together http://www.kritner.com/solar-projection/ 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 https://angular.io/api/common/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

CSS

.positive {
    background-color: lightgreen;
}

.negative {
    background-color: lightcoral;
}

Typescript

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'>
    <thead>
      <tr>
        <th>Year</th>
        <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>
    </thead>
    <tbody>
      <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>
      </tr>
    </tbody>
  </table>

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.