Angular Basics — Pipes

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>