Cycles réactifs dans Angular

La réactivité fonctionnera également dans une boucle ngFor. Cela signifie que lors de modifications du tableau, ces modifications seront immédiatement reflétées à l'écran.

Essayons en pratique. Supposons que nous ayons le tableau suivant :

app/app.component.tsexport class AppComponent {
  public arr: string[] = ['a', 'b', 'c', 'd'];
}

Affichons notre tableau dans une boucle sous forme de liste :

app/app.component.html<ul>
  <li *ngFor="let elem of arr">
    {{ elem }}
  </li>
</ul>

Créons un bouton, lors du clic sur lequel une méthode de la classe sera appelée :

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

Dans cette méthode, modifions notre tableau d'une certaine manière, par exemple, en y ajoutant un nouvel élément :

app/app.component.tsexport class AppComponent {
  public text: string = '';
  
  public add(): void {
    this.arr.push('!');
  }
}

Maintenant, si vous exécutez le code et cliquez sur le bouton, immédiatement après le clic, un nouvel élément apparaîtra dans la liste.