Angular'da Reaktivite

Public özelliklerde herhangi bir değişiklik olduğunda, şablon reaktif bir şekilde tepki verecek, yani anında değişecektir. Angular'da reaktivite bu şekilde çalışır.

Bir örnek üzerinden inceleyelim. Bir metin içeren bir özelliğimiz olsun:

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

Özelliğimizi bir etiket içinde gösterelim:

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

Şimdi, tıklandığında bir sınıf metodunu çağıracak bir buton yapalım:

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

Bu metotta metni değiştirelim:

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public show(): void {
    this.text = 'hello';
  }
}

Şimdi, kodu çalıştırıp butona basarsak, tıklamadan hemen sonra div içindeki metin değişecektir.