Bucle Reactive în Angular

Reactivitatea va funcționa și într-un buclă ngFor. Aceasta înseamnă că, la modificările vectorului, aceste modificări se vor reflecta imediat pe ecran.

Să încercăm în practică. Să presupunem că avem următorul vector:

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

Să afișăm vectorul nostru într-un buclă sub formă de listă:

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

Să creăm un buton, la click pe care se va apela o metodă a clasei:

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

În această metodă, vom modifica cumva vectorul nostru, de exemplu, vom adăuga un nou element în el:

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

Acum, dacă rulăm codul și apăsăm pe buton, imediat după apăsare în listă va apărea un nou element.

Este dat un vector. Afișați elementele lui într-un buclă. Realizați un buton, la apăsarea căruia din vector va fi șters ultimul element.