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:

app/app.component.tsexport class AppComponent {
  public text: string = '';
}

Mari paparkan sifat kita dalam beberapa tag:

app/app.component.html<div>
  {{ text }}
</div>

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

app/app.component.html<button (click)="show()">
  show
</button>

Dalam kaedah ini, mari ubah teks:

app/app.component.tsexport 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.