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:

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

Esitetään ominaisuutemme jossakin tagissa:

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

Tehdään nyt painike, jota klikkaamalla kutsutaan luokan metodia:

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

Tässä metodissa muutetaan teksti:

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