Direktíva for v Angular

Majme pole:

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

Prejdime toto pole cyklom v súbore template. Na to je určená directiva *ngFor. Môže prechádzať pole a vypísať každý jeho prvok v samostatnom tagu.

Na začiatok je potrebné túto direktívu importovať:

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

A pridať ju do sekcie imports v dekorátore:

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

Teraz ju možno používať. Pozrime sa, ako sa to robí. Majme zoznam ul:

<ul>
	
</ul>

Urobme to tak, aby naše pole bolo prechádzané cyklom a každý jeho prvok bol vypísaný v tagoch li. To sa robí nasledovne:

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

Dané pole:

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

Vypíšte každý prvok tohto poľa v samostatnom odseku.

Upravte predchádzajúcu úlohu tak, aby v odsekoch boli vypísané štvorce prvkov nášho poľa.