Angular Basics — NgClass

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 and 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.


Russell Hammett Jr. (Kritner)

Written by

Just a boring Application Developer/Dad. I enjoy gaming, learning new technologies, reading, and potentially other stuff. That’s about it.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade