Αντίδραση στο Angular

Σε οποιεσδήποτε αλλαγές στις δημόσιες ιδιότητες, το πρότυπο θα αντιδρά αντιδραστικά, δηλαδή θα αλλάζει αμέσως. Έτσι λειτουργεί η αντιδραστικότητα στο Angular.

Ας δούμε ένα παράδειγμα. Ας υποθέσουμε ότι έχουμε μια ιδιότητα που περιέχει κείμενο:

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

Ας εμφανίσουμε την ιδιότητα μας σε κάποια ετικέτα:

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

Τώρα ας φτιάξουμε ένα κουμπί, upon click στο οποίο θα καλείται μια μέθοδος της κλάσης:

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

Σε αυτή τη μέθοδο, ας αλλάξουμε το κείμενο:

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

Τώρα, εάν εκτελέσετε τον κώδικα και πατήσετε το κουμπί, το κείμενο στο div θα αλλάξει αμέσως μετά το πάτημα.