Ciclos Reativos no Angular

A reatividade também funcionará em um loop ngFor. Isso significa que quando o array for alterado, as mudanças serão refletidas imediatamente na tela.

Vamos testar na prática. Suponha que temos o seguinte array:

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

Vamos exibir nosso array em um loop como uma lista:

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

Vamos criar um botão que, ao ser clicado, chamará um método da classe:

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

Neste método, vamos modificar nosso array de alguma forma, por exemplo, adicionando um novo elemento:

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

Agora, se executarmos o código e clicarmos no botão, um novo elemento aparecerá imediatamente na lista após o clique.

Dado um array. Exiba seus elementos em um loop. Crie um botão que, ao ser clicado, remova o último elemento do array.