Angular Basics — Binding

Expanding on the recent solar panel array post from Vivint Solar, and the fact I made a solar panel estimation page on my website http://kritner.com/solar-projection — I wanted to go into a few posts to detail some of my learning experiences via angular, docker, 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;