La fonction trackBy avec ngFor dans Angular

1. Utilisation de la fonction trackBy avec ngFor dans Angular
2. Utilisation de la fonction ngFor dans Angular
3. Utiliser le trackBy avec ngFor dans Angular

Cet article abordera trackyBy avec la directive ngFor et son utilisation dans Angular.

Utilisation de la fonction trackBy avec ngFor dans Angular

Dans Angular, la fonctionnalité trackBy permet à l’utilisateur de sélectionner une clé spécifique qui sera utilisée pour analyser chaque élément de la liste en fonction de cette clé. trackBy est particulièrement utile lorsque vous avez des tableaux et des objets imbriqués qui souhaitent fournir un identifiant unique pour chacun.

Il est important de noter que trackBy ne s’applique qu’à l’itération actuelle d’un tableau ou d’un objet, et non à toutes les itérations futures.

Utilisation de la fonction ngFor dans Angular

Étant donné que HTML n’a pas de langage de modèle intégré, Angular ajoute une puissante syntaxe de modèle, contenant plusieurs directives comme ngFor, analogues aux for-loops dans les langages informatiques.

NgFor est une directive intégrée dans Angular qui peut être utilisée pour itérer sur un tableau ou un objet. Cette directive crée un modèle pour chaque élément de la liste, l’ajoute au DOM et met à jour le DOM lorsqu’il y a des changements dans les éléments.

Syntaxe:

<ul>
  <li *ngFor="let item of items">{{ item.name }}</li>
</ul>

Nous utilisons la directive ngFor pour itérer n’importe quel tableau ou collection d’objets. Cependant, si nous devons mettre à jour les informations de la collection à un moment donné, par exemple en réponse à une requête HTTP, nous rencontrerons des problèmes.

En conséquence, Angular doit supprimer et recréer tous les éléments DOM liés aux données. Nous aidons la fonction Angular trackBy à résoudre ce problème.

La fonction trackBy accepte deux arguments, le index et le current item. Elle doit retourner l’identité spécifique de l’élément.

Angular peut désormais suivre les composants ajoutés ou supprimés en fonction de l’identité particulière. Seul le constructeur supprime les éléments qui ont déjà été modifiés lorsque vous mettez à jour le tableau.

Utiliser le trackBy avec ngFor dans Angular

Discutons de l’utilisation de la fonction trackBy avec la directive ngFor d’Angular.

• Tout d’abord, il faut comprendre les fondamentaux de Angular et son fonctionnement.
• Nous devons installer la dernière version de l’interface de ligne de commande Angular.
• Le système doit avoir installé la version la plus récente de Node JS.

Nous allons maintenant créer un programme qui utilise le tableau du modèle pour afficher des informations sur les employés. Nous avons utilisé la directive ngFor pour parcourir le tableau des employés et afficher les informations de base pour chacun.

Nous créons également une méthode trackBy, qui doit identifier de manière unique chaque employé et l’affecter à la directive ngFor.

Extrait de code - app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  informations: { id: number; name: string; Age: string; }[];

  EmplyeesInfo(){
    this.informations = [
      { id:1, name:'Adil',  Age:' (Age 24)' },
      { id:2, name:'Steve' , Age:' (Age 30)'},
      { id:3, name:'John' ,Age:' (Age 27)'},
      { id:2, name:'Sofia' , Age:' (Age 23)' },
      { id:3, name:'Adam', Age: ' (Age 36)' }
    ];
  }
  trackEmployee(index: any,information: { id: any; }){
    return information ? information.id : undefined;
  }
}

Extrait de code - app.component.html:

<button (click)="EmplyeesInfo()">Employees Information</button>
<ul>
  <li *ngFor="let information of informations; trackBy: trackEmployee">
    {{ information.name }}
    {{ information.Age }}
  </li>
</ul>

Production:

Cliquez ici pour vérifier la démonstration en direct de l’exemple de code.