Réactivité dans Angular

Lors de tout changement des propriétés publiques, le template réagira de manière réactive, c'est-à-dire qu'il se modifiera instantanément. C'est ainsi que fonctionne la réactivité dans Angular.

Regardons un exemple. Supposons que nous ayons une propriété contenant du texte :

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

Afficherons notre propriété dans une balise :

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

Maintenant, créons un bouton sur lequel un clic appellera une méthode de la classe :

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

Dans cette méthode, modifions le texte :

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

Maintenant, si vous exécutez le code et cliquez sur le bouton, le texte dans la div changera immédiatement après le clic.