Reaktivita v Angular

Pri akýchkoľvek zmenách verejných vlastností šablóna bude reagovať reaktívne, to znamená okamžite sa meniť. Takto funguje reaktivita v Angular.

Pozrime sa na príklad. Nech máme vlastnosť, ktorá obsahuje text:

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

Vypíšme našu vlastnosť v nejakom tagu:

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

Teraz vytvorme tlačidlo, po kliknutí na ktoré sa bude volať metóda triedy:

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

V tejto metóde zmeňme text:

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

Teraz, ak spustíme kód a stlačíme tlačidlo, tak ihneď po stlačení sa zmení text v div-e.