Learn TypeScript 3 by Building Web Applications

Component templates and data bindings

Here's a quick introduction to templating with Angular.

To write templates, you can use most standard HTML tags as well as many additional features that Angular provides. Using those, you can render data held by your controller, perform transformations, loop over arrays, define events and event handlers, and much more.

The following is an example template that is taken directly from the official documentation:

<h2>Hero List</h2> 
 
<p><i>Pick a hero from the list</i></p> 
<ul> 
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> 
    {{ hero.name }} 
  </li> 
</ul> 
 
<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail> 

In this example, you will notice the following:

• Standard HTML ...