Angular 2 Directives *ngFor
Example
form1.component.ts:
import { Component } from '@angular/core';
// Defines example component and associated template
@Component({
selector: 'example',
template: `
<div *ngFor="let f of fruit"> {{f}} </div>
<select required>
<option *ngFor="let f of fruit" [value]="f"> {{f}} </option>
</select>
`
})
// Create a class for all functions, objects, and variables
export class ExampleComponent {
// Array of fruit to be iterated by *ngFor
fruit = ['Apples', 'Oranges', 'Bananas', 'Limes', 'Lemons'];
}
Output:
<div>Apples</div>
<div>Oranges</div>
<div>Bananas</div>
<div>Limes</div>
<div>Lemons</div>
<select required>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Bananas">Bananas</option>
<option value="Limes">Limes</option>
<option value="Lemons">Lemons</option>
</select>
In its most simple form, *ngFor has two parts : let variableName of object/array
In the case of fruit = ['Apples', 'Oranges', 'Bananas', 'Limes', 'Lemons'];,
Apples, Oranges, and so on are the values inside the array fruit.
[value]="f" will be equal to each current fruit (f) that *ngFor has iterated over.
Unlike AngularJS, Angular2 has not continued with the use of ng-options for <select> and ng-repeat for all other general repetitions.
*ngFor is very similar to ng-repeat with slightly varied syntax.
References:
Angular2 | Displaying Data
Angular2 | ngFor
Angular2 | Forms
