Reaktiivsus Angularis

Iga muutuse korral avalikes omadustes, reageerib mall reaktiivselt, see tähendab kohe muutudes. Nii toimib reaktiivsus Angularis.

Vaatame näidet. Olgu meil omadus, mis sisaldab teksti:

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

Kuvame oma omaduse mõnes sildis:

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

Teeme nüüd nupu, millele klõpsates kutsutakse välja klassi meetod:

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

Selles meetodis muudame teksti:

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

Nüüd, kui käivitada kood ja vajutada nuppu, siis kohe pärast vajutust muutub tekst div-is.