Kereaktifan dalam Angular

Sebarang perubahan pada sifat awam, templat akan bertindak balas secara reaktif, iaitu berubah serta-merta. Beginilah cara kereaktifan berfungsi dalam Angular.

Mari kita lihat contoh. Katakan kita mempunyai sifat yang mengandungi teks:

export class AppComponent {
	public text: string = '';
}

Mari paparkan sifat kita dalam beberapa tag:

<div>
	{{ text }}
</div>

Sekarang, mari buat butang yang, apabila diklik, akan memanggil kaedah kelas:

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

Dalam kaedah ini, mari ubah teks:

export class AppComponent {
	public text: string = '';
	
	public show(): void {
		this.text = 'hello';
	}
}

Sekarang, jika anda menjalankan kod dan menekan butang, teks dalam div akan berubah serta-merta selepas ditekan.

Buat satu div dan dua butang. Lakukan supaya apabila butang pertama ditekan, satu teks muncul dalam div, dan apabila butang kedua ditekan - teks lain muncul.