Angular'da Reaktif Döngüler

Reaktivite, ngFor döngüsünde de çalışacaktır. Bu, dizide değişiklikler olduğunda, bu değişikliklerin hemen ekranda görüneceği anlamına gelir.

Pratikte deneyelim. Aşağıdaki diziye sahip olduğumuzu varsayalım:

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

Dizimizi bir döngüde liste olarak çıktılayalım:

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

Tıklandığında bir sınıf metodunu çağıracak bir düğme yapalım:

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

Bu metotta dizimizi bir şekilde değiştirelim, örneğin, içine yeni bir eleman ekleyelim:

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

Şimdi, kodu başlatıp düğmeye basarsak, basıldıktan hemen sonra listede yeni bir eleman görünecektir.

Bir dizi verilmiştir. Elemanlarını bir döngüde çıktılayın. Basıldığında diziden son elemanı silecek bir düğme yapın.