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 :

export class AppComponent {
	public arr: string[] = ['a', 'b', 'c', 'd'];
}

Affichons notre tableau dans une boucle sous forme de liste :

<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 :

<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 :

export 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.

Un tableau est donné. Affichez ses éléments dans une boucle. Créez un bouton, lors du clic sur lequel le dernier élément sera supprimé du tableau.