Reaktywność w Angular

Przy każdej zmianie publicznych właściwości, szablon zareaguje reaktywnie, czyli natychmiast się zmieni. Tak działa reaktywność w Angular.

Spójrzmy na przykład. Załóżmy, że mamy właściwość zawierającą tekst:

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

Wyświetlmy naszą właściwość w jakimś tagu:

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

Teraz zróbmy przycisk, po kliknięciu którego będzie wywoływana metoda klasy:

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

W tej metodzie zmieńmy tekst:

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

Teraz, jeśli uruchomimy kod i naciśniemy przycisk, to tekst w divie zmieni się natychmiast po naciśnięciu.