Cicli Reattivi in Angular

La reattività funzionerà anche in un ciclo ngFor. Ciò significa che quando l'array cambia, queste modifiche si rifletteranno immediatamente sullo schermo.

Proviamo nella pratica. Supponiamo di avere il seguente array:

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

Visualizziamo il nostro array in un ciclo come lista:

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

Creiamo un pulsante che, quando cliccato, chiamerà un metodo della classe:

<button (click)="add()">
	add
</button>

In questo metodo modificheremo il nostro array in qualche modo, ad esempio, aggiungendo un nuovo elemento:

export class AppComponent {
	public text: string = '';
	
	public add(): void {
		this.arr.push('!');
	}
}

Ora, se avvii il codice e premi il pulsante, un nuovo elemento apparirà immediatamente nella lista dopo il click.

Dato un array. Visualizza i suoi elementi in un ciclo. Crea un pulsante che, quando premuto, rimuoverà l'ultimo elemento dall'array.