I recently started playing around with Angular for my solar projection page http://www.kritner.com/solar-projection/ and thought I’d document some of my experiences playing around with “new” tech — at least relatively speaking.
In my day job, I am a c# developer, currently solely a c# developer. Prior to this job, I was proficient in c#, db, and “okay” in some front end stuff.
Anyway, last post we worked on basic data binding, this post I want to expand on that a bit. Specifically, we were binding a lot of numbers onto our view (I still don’t know if that’s the right word), so some formatting would be good! Currency formatting, and/or thousands separators are nice things to have IMO.
To apply such formatting we can use pipes — https://angular.io/guide/pipes. Luckily, they’re simple to use, and there are a few that already exist that would work for my use case!
From https://angular.io/api I found the CurrencyPipe and the NumberPipe, both of which I will utilize on my model from the last post.
As a starting point:
<h1>Solar Projection</h1>
<p *ngIf="!solarProjection"><em>Loading...</em></p>
<div *ngIf="solarProjection">
<h4>Solar Estimate (Guaranteed for 90% of 17k Kw/year Production</h4>
<ul>
<li>Total Cost/year: {{ solarProjection.solarEstimate.totalCost }}</li>
<li>Total Kw/h/year: {{ solarProjection.solarEstimate.totalKiloWattHours }}</li>
<li>Avg Cost/month: {{ solarProjection.solarEstimate.averageCostPerMonth }}</li>
<li>Avg Cost/kw/h {{ solarProjection.solarEstimate.averageCostKiloWattHour }}</li>
<li>Total Years Financed: {{ solarProjection.financeYears }} </li>
</ul>
<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 }}</td>
<td>{{ projection.totalCost }}</td>
<td>{{ projection.averageCostPerMonth }}</td>
<td>{{ projection.costSolar100Percent }}</td>
<td>{{ projection.totalSavings100Percent }}</td>
<td>{{ projection.costSolar90Percent }}</td>
<td>{{ projection.totalSavings90Percent }}</td>
<td>{{ projection.costSolar80Percent }}</td>
<td>{{ projection.totalSavings80Percent }}</td>
</tr>
</tbody>
</table>
</div>
A large portion of these numbers (like “cost”s) can be considered “currency”, while the others are generally units of kw/h, which can be considered “number”. To apply pipes, you simply “pipe” your bound data into the “pipe” you’re using (similar to how you would do in bash) {{ myData | currency }} as an example.
Applying the above to our page, it now looks like:
<h1>Solar Projection</h1>
<p *ngIf="!solarProjection"><em>Loading...</em></p>
<div *ngIf="solarProjection">
<h4>Solar Estimate (Guaranteed for 90% of 17k Kw/year Production</h4>
<ul>
<li>Total Cost/year: {{ solarProjection.solarEstimate.totalCost | currency }}</li>
<li>Total Kw/h/year: {{ solarProjection.solarEstimate.totalKiloWattHours | number }}</li>
<li>Avg Cost/month: {{ solarProjection.solarEstimate.averageCostPerMonth | currency }}</li>
<li>Avg Cost/kw/h {{ solarProjection.solarEstimate.averageCostKiloWattHour | currency }}</li>
<li>Total Years Financed: {{ solarProjection.financeYears }} </li>
</ul>
<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 }}</td>
<td>{{ projection.totalCost | currency }}</td>
<td>{{ projection.averageCostPerMonth | currency }}</td>
<td>{{ projection.costSolar100Percent | currency }}</td>
<td>{{ projection.totalSavings100Percent | currency }}</td>
<td>{{ projection.costSolar90Percent | currency }}</td>
<td>{{ projection.totalSavings90Percent | currency }}</td>
<td>{{ projection.costSolar80Percent | currency }}</td>
<td>{{ projection.totalSavings80Percent | currency }}</td>
</tr>
</tbody>
</table>
</div>
Which will look like:
Top comments (0)