Ciclos reactivos en Angular

La reactividad también funcionará en el ciclo ngFor. Esto significa que cuando el array cambie, estos cambios se reflejarán inmediatamente en la pantalla.

Probemos en la práctica. Supongamos que tenemos el siguiente array:

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

Mostremos nuestro array en un ciclo como una lista:

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

Hagamos un botón, al hacer clic en el cual se llamará a un método de la clase:

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

En este método, modifiquemos de alguna manera nuestro array, por ejemplo, agreguemos un nuevo elemento:

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

Ahora, si ejecutamos el código y presionamos el botón, inmediatamente después de hacer clic, aparecerá un nuevo elemento en la lista.

Se da un array. Muestra sus elementos en un ciclo. Crea un botón que, al presionarlo, elimine el último elemento del array.