Reaktiivisuus Angularissa
Kaikissa julkisten ominaisuuksien muutoksissa, malli reagoi reaktiivisesti, eli muuttuu välittömästi. Näin reaktiivisuus toimii Angularissa.
Katsotaanpa esimerkkiä. Oletetaan, että meillä on ominaisuus, joka sisältää tekstin:
export class AppComponent {
public text: string = '';
}
Esitetään ominaisuutemme jossakin tagissa:
<div>
{{ text }}
</div>
Tehdään nyt painike, jota klikkaamalla kutsutaan luokan metodia:
<button (click)="show()">
näytä
</button>
Tässä metodissa muutetaan teksti:
export class AppComponent {
public text: string = '';
public show(): void {
this.text = 'hei';
}
}
Nyt, jos käynnistät koodin ja painat painiketta, teksti div-elementissä muuttuu välittömästi painalluksen jälkeen.
Tee div-elementti ja kaksi painiketta. Tee niin, että ensimmäistä painiketta painamalla div-elementtiin tulee yksi teksti, ja toista painiketta painamalla - toinen teksti.
