Reattività in Angular

In caso di qualsiasi modifica alle proprietà pubbliche, il template reagirà reattivamente, cioè cambierà istantaneamente. Ecco come funziona la reattività in Angular.

Diamo un'occhiata a un esempio. Supponiamo di avere una proprietà che contiene del testo:

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

Visualizziamo la nostra proprietà in un tag:

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

Ora creiamo un pulsante, al click del quale verrà chiamato un metodo della classe:

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

In questo metodo cambiamo il testo:

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

Ora, se avvii il codice e premi il pulsante, il testo nel div cambierà immediatamente dopo il click.