Reactieve loops in Angular

Reactiviteit werkt ook in een ngFor loop. Dit betekent dat wanneer de array verandert, deze veranderingen onmiddellijk op het scherm worden weergegeven.

Laten we het in de praktijk proberen. Stel dat we de volgende array hebben:

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

Laten we onze array in een loop weergeven als een lijst:

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

Laten we een knop maken waarop een klik een methode in de klasse aanroept:

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

Laten we in deze methode onze array op de een of andere manier wijzigen, bijvoorbeeld door een nieuw element toe te voegen:

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

Als je de code nu start en op de knop klikt, verschijnt er onmiddellijk na het klikken een nieuw element in de lijst.

Gegeven een array. Geef zijn elementen weer in een loop. Maak een knop waarmee het laatste element uit de array wordt verwijderd.