Angular2 Ngfor

angular2

// Angular 2 - *ngFor directive:

The *ngFor directive is used to iterate over an array of objects.  The leading
asterisk in front of ngFor is a critical part of this syntax.  The asterisk
prefix to ngFor indicates that the <li> element and its children constitute a
master template.  The ngFor directive iterates over the heroes array returned by 
the AppComponent.heroes property and stamps out instances of this template.

The quoted text assigned to ngFor means “take each hero in the heroes array, 
store it in the local hero variable, and make it available to the corresponding 
template instance”.

The let keyword before "hero" identifies hero as a template input variable. We 
can reference this variable within the template to access a hero’s properties.

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
  <span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License