Siklus Reaktif di Angular

Reaktivitas juga akan bekerja dalam loop ngFor. Artinya, ketika terjadi perubahan pada array, perubahan tersebut akan langsung terlihat di layar.

Mari kita coba dalam praktik. Misalkan kita memiliki array berikut:

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

Tampilkan array kita dalam loop sebagai daftar:

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

Buat tombol yang ketika diklik akan memanggil method kelas:

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

Dalam method ini, kita akan mengubah array kita secara tertentu, misalnya menambahkan elemen baru ke dalamnya:

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

Sekarang, jika kode dijalankan dan tombol ditekan, maka tepat setelah penekanan, elemen baru akan muncul dalam daftar.

Diberikan sebuah array. Tampilkan elemen-elemennya dalam loop. Buat tombol yang ketika ditekan akan menghapus elemen terakhir dari array.