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

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:

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:

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:

So the whole thing looks like:

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: