De for-directive in Angular

Stel we hebben een array:

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

Laten we deze array doorlopen met een lus in het templatebestand. Hiervoor is de directive *ngFor bedoeld. Het kan een array doorlopen en elk element ervan in een aparte tag weergeven.

Om te beginnen moet deze directive worden geïmporteerd:

import {NgFor} from "@angular/common";

En voeg deze toe aan de imports-sectie in de decorator:

@Component({
	.....
	imports: [....., NgFor],
	....
})

Nu kan je het gebruiken. Laten we bekijken hoe dat gaat. Stel we hebben een lijst ul:

<ul>
	
</ul>

Laten we ervoor zorgen dat onze array wordt doorlopen in een lus en dat elk element ervan wordt weergegeven in de tags li. Dit gaat als volgt:

<ul>
	<li *ngFor="let el of arr">
		{{ el }}
	</li>
</ul>

Gegeven een array:

export class AppComponent {
	public arr: number[] = [1, 2, 3, 4, 5];
}

Geef elk element van deze array weer in een aparte alinea.

Wijzig de vorige opdracht zo dat in de alinea's de kwadraten van de elementen van onze array worden weergegeven.