Reaktív ciklusok az Angular-ban

A reakcióképesség ciklusban is működni fog ngFor. Ez azt jelenti, hogy a tömb változásai azonnal megjelennek a képernyőn.

Próbáljuk ki a gyakorlatban. Tegyük fel, hogy van egy ilyen tömbünk:

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

Jelenítsük meg a tömbünket ciklusban lista formájában:

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

Készítsünk egy gombot, amelyre kattintva egy osztálymetódus hívódik meg:

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

Ebben a metódusban változtassuk meg a tömbünket valahogy, például adjunk hozzá egy új elemet:

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

Most, ha elindítjuk a kódot és megnyomjuk a gombot, akkor a megnyomás után azonnal megjelenik egy új elem a listában.

Adott egy tömb. Jelenítse meg elemeit ciklusban. Készítsen egy gombot, amelyre kattintva a tömb utolsó eleme törlődik.