Direttiva for in Angular

Supponiamo di avere un array:

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

Iteriamo su questo array con un ciclo nel file del template. A questo scopo è pensata la directiva *ngFor. Essa può iterare su un array e visualizzare ogni suo elemento in un tag separato.

Per prima cosa questa direttiva deve essere importata:

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

E aggiungerla alla sezione degli import nel decoratore:

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

Ora possiamo usarla. Vediamo come si fa. Supponiamo di avere una lista ul:

<ul>
	
</ul>

Facciamo in modo che il nostro array venga iterato e che ogni suo elemento venga visualizzato nei tag li. Questo si fa nel modo seguente:

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

Dato l'array:

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

Visualizza ogni elemento di questo array in un paragrafo separato.

Modifica il task precedente in modo che nei paragrafi vengano visualizzati i quadrati degli elementi del nostro array.