Angular Basics - Binding

I’m not really a front end guy, but I want to try to learn at a minimum the basics. I wanted to expand on the post my first NuGet package, by putting a visualization to the projection.

So putting together this front end was a decent challenge, even for how crappy it looks. I’m not really a front end guy, so I thought I’d at least get some exposure to angular, typescript, etc. There are already tutorials for this stuff out there for sure, but I wanted to try to start blogging more, and writing things down helps me retain information.

Binding is pretty simple, given your angular template, information enclosed within: {{ }} is bound. For my angular app, I’m using the dotnet core cli template dotnet new angular IIRC. You can do simple things such as {{ 5 + 4 }} or more useful things, like binding to a model.

Given (a portion of) my typescript file:

interface SolarProjection {
  solarEstimate: YearlyElectricityUsage;
  futureProjection: FutureProjection[];
  financeYears: number;
}

interface YearlyElectricityUsage {
  averageCostKiloWattHour: number;
  averageCostPerMonth: number;
  totalCost: number;
  totalKiloWattHours: number;
}

interface FutureProjection {
  solarEstimate: YearlyElectricityUsage;
  purchaseYear: number;
  averageCostKiloWattHour: number;
  averageCostPerMonth: number;
  totalCost: number;
  totalKiloWattHours: number;

  costSolar100Percent: number;
  totalSavings100Percent: number;

  costSolar90Percent: number;
  totalSavings90Percent: number;

  costSolar80Percent: number;
  totalSavings80Percent: number;
}

I want to bind some (non array) information to my view…? I’m not sure what the right word is in angular.

My model data is going into a variable called solarProjection as per:

export class SolarProjectionComponent {
  public solarProjection: SolarProjection;

constructor(http: HttpClient, [@Inject](http://twitter.com/Inject)('BASE_URL') baseUrl: string) {
    http.get<SolarProjection>(baseUrl + 'api/SolarProjection/GetProjection').subscribe(result => {
      this.solarProjection = result;
    }, error => console.error(error));
  }
}

Now in the HTML, we simply have to bind with {{ }}

First, let’s create a div that is visible only when our data is ready, and binding some base (and flat) model data:

<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>
</div>

Now we have some root information present on our page, but from our model above, you can see we had some array data to display as well.

That’s pretty easy too using *ngFor! Let’s throw our information in a table (note all of this within the div defined above:

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

So the whole thing 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 }}</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>

At this point, the page looks like this:

Starting to look like… something. Next we’ll have to look into doing some formatting of the displayed numbers.

Related:

• My first NuGet package! Kritner.SolarEstimate