Welcome back to this review of the Pluralsight course Angular 2: Getting Started (Updated) by Deborah Kurata.

Deborah is an independent software designer/developer specializing in Web and .NET development using AngularJS, C#, and VB.NET. She has won the Microsoft Most Valuable Professional Award 13 times.

The course uses Visual Studio Code as the editor, but if you like using Visual Studio 2015, check out Deborah’s post Angular 2 Getting Started With Visual Studio 2015.

Templates, Interpolation and Directives

Introduction

Deborah says Angular makes it easier to build rich and powerful User Interfaces. In this course module, we’ll build a product list component to display a list of products.

Building a Template

We can either define a template with a simple line string, or use the ES2015 backticks to define a template over multiple lines.

However, Deborah says it’s often better to define a linked template with the HTML in its own file.

This component uses Bootstrap. If you’ve not used it before, you can follow along with this course without any problems. But if you want to learn Bootstrap, see Shawn Wildermuth’s Bootstrap 3 course.

In this lesson we see the code for app.component.ts and product-list.component.html.

The HTML includes a table with an empty tbody element.

Building the Component

Deborah explains we need to use the templateUrl property in our component definition.

Using a Component as a Directive

We can insert a component’s template into any other component’s template! We use the selector as an HTML tag.

Unfortunately after we make this change and run it, our page doesn’t display. All we see is “Loading App…”. The JS error is:

Unhandled promise rejection: Template parse errors:
'pm-products' is not a known element

Fortunately this is a simple fix. We go to app.module.ts and add ProductListComponent to our declarations array.

Binding with Interpolation

Binding is about providing property data to our templates, and calling methods from the template.

We define the binding syntax in the template. There are several ways to bind and we learn interpolation here. It’s a one way binding from class property to template and we use the {{doubleCurlys}} in the template.

We see an example of this: pageTitle, and it is very simple.

Adding Logic with Directives: ngIf

We are introduced to Angular directives here. Structural directives modify the structural of the view. Examples of structural directives include *ngIf and *ngFor.

*ngIf, our first example, provides if logic.

This functionality is exposed through BrowserModule. For more details see the official ngModule docs.

Deborah shows us how to update the code to show products based on the JSON data that is available.

Adding Logic with Directives: ngFor

We add a tr element with the *ngFor directive, and use interpolation to bind the properties in each td element.

We see two products listed in our products table. However the price column is not formatted correctly and is missing a currency symbol. We’ll fix that in the next module.

Deborah also explains the difference between for…of and for…in – think in for index!

This module is concluded with a checklist for working with templates, and a summary of the module.