[Angular 2] 3. NgFor directives

You can then use this array in your template with the NgFor directive to create copies of DOM elements with one for each item in the array.

//Typescript
template: `
  <p>My name: {{ myName }}</p>
  <p>Friends:</p>
  <ul>
     <li *ng-for="#name of names">
        {{ name }}
     </li>
  </ul>
`,

 

To make this work, you'll also need to add the NgFor directive used by the template so that Angular knows to include it:

//Typescript
import {Component, View, bootstrap, NgFor} from 'angular2/angular2';
@View({
  ...
  directives: [NgFor]
})

 

• *ng-for : create a DOM element for each item in an iterable like an array
• #name : refer to individual values of the iterable as 'name'
• of names : the iterable to use is called 'names' in the current controller