Reaktivitás az Angular-ban

A nyilvános tulajdonságok bármely változásakor a template reaktívan fog reagálni, vagyis azonnal megváltozik. Így működik a reaktivitás az Angular-ban.

Nézzünk egy példát. Tegyük fel, hogy van egy tulajdonságunk, amely szöveget tartalmaz:

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

Jelenítsük meg a tulajdonságunkat valamilyen tag-ben:

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

Most készítsünk egy gombot, amelyre kattintva meghívódik egy osztálymetódus:

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

Ebben a metódusban változtassuk meg a szöveget:

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

Most, ha elindítjuk a kódot és rákattintunk a gombra, akkor a kattintás után azonnal megváltozik a szöveg a div-ben.