Angular Basics — NgClass
Tags: typescript, angular, programming, learningtocode
Published: 2018-09-08 18:50:56

---
title: Angular Basics — NgClass
published: true
tags: typescript,angular,programming,learning-to-code
canonical_url: https://medium.com/@kritner/angular-basics-ngclass-bc4081ca3809
---

![](https://cdn-images-1.medium.com/max/250/0*ioWFxvjTSepxUFpm.png)

Continuing on with my things learned from putting together [http://www.kritner.com/solar-projection/](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](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

```css
.positive {
    background-color: lightgreen;
}

.negative {
    background-color: lightcoral;
}
```

Typescript

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

    return false;
}
```

and the basic “template” to plug into my view

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

The entirety of the table section of code now is:

```html
<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>
```

![](https://cdn-images-1.medium.com/max/1024/1*wEucFE2RDPz6-eNCyIEi9A.png)<figcaption>Result after applying NgClass shading</figcaption>

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.

Related:

- [My First NuGet Package! Kritner.SolarProjection](https://medium.com/@kritner/my-first-nuget-package-kritner-solarestimate-79d7f4abfdc2)
- [Angular Basics — Binding](https://dev.to/kritner/angular-basics--binding-5dn8)
- [Angular Basics — Pipes](https://dev.to/kritner/angular-basics--pipes-180)
- [Angular and TypeScript Basics — Custom Pipes](https://medium.com/@kritner/angular-and-typescript-basics-custom-pipes-eeafe33fec0c)