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:
export class AppComponent {
public text: string = '';
}
Jelenítsük meg a tulajdonságunkat valamilyen tag-ben:
<div>
{{ text }}
</div>
Most készítsünk egy gombot, amelyre kattintva meghívódik egy osztálymetódus:
<button (click)="show()">
show
</button>
Ebben a metódusban változtassuk meg a szöveget:
export 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.
Készítsen egy div-et és két gombot. Állítsa be úgy, hogy az első gomb megnyomására egy szöveg kerüljön a div-be, a második megnyomására pedig egy másik szöveg.
