Ajouter un élément dans une liste Angular

Les tableaux et les boucles en JavaScript sont souvent utilisés ensemble pour traiter et manipuler des ensembles de données. Les boucles permettent d'itérer sur chaque élément d'un tableau, exécutant un bloc de code pour chaque élément. C'est une pratique courante pour effectuer des opérations comme le filtrage, la transformation ou le calcul d'agrégats sur les données du tableau.

Depuis sa version 2, le framework Angular a été réécrit avec le langage TypeScript. C'est donc ce dernier qui est conseillé pour écrire son application, même si le langage JavaScript fonctionne toujours. TypeScript utilise un typage fort, on ne peut pas simplement déclarer des variables sans types comme on peut le faire en JavaScript.

Déclaration et typage d'un tableau d'objets

Il faut également respecter des étapes pour déclarer un tableau d'objets. Le mot-clé "type" permet de déclarer un nouveau type. On peut utiliser cette directive afin de déclarer précisément son tableau d'objets. Il est possible de raccourcir la notation en une seule ligne. Il faut pour cela préciser directement le type dans le tableau au lieu de le lier à un type. Une autre solution consiste à utiliser les interfaces, l'un des ajouts du langage TypeScript par rapport au JavaScript. Les interfaces permettent de décrire un type d'objet spécifique en indiquant les propriétés requises.

Itération et manipulation : boucles et méthodes de tableau

Voici un exemple illustrant comment utiliser les boucles avec les tableaux :

Exemple : Calcul de la Somme des Éléments d'un Tableau Imaginons que nous avons un tableau de nombres et que nous voulons calculer la somme de tous ces nombres. Dans cet exemple, la boucle for parcourt chaque élément du tableau nombres. La variable i sert d'indice pour accéder à chaque élément du tableau. À chaque itération, la valeur de l'élément actuel (nombres[i]) est ajoutée à la variable somme. Après la fin de la boucle, somme contient la somme totale de tous les éléments du tableau.

Lire aussi: Modifier Activité Kbis Auto-Entrepreneur

Variante avec la Boucle for...of Vous pouvez également utiliser la boucle for...of pour itérer sur les éléments d'un tableau.

Les méthodes fonctionnelles des tableaux facilitent les transformations et la création de nouvelles collections : .map(callback) Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau. .filter(callback) Crée un nouveau tableau avec tous les éléments qui passent le test implémenté par la fonction fournie. .reduce(callback, valeurInitiale) Applique une fonction qui est un "accumulateur" et qui traite chaque valeur d'un tableau (de gauche à droite) afin de la réduire à une seule valeur.

Ajouter un élément dans une liste Angular : principes

Imaginons un composant Angular dans lequel nous avons défini une liste de sociétés avec leur icône. Pour implémenter notre liste, nous allons créer un composant spécialisé qui va gérer le menu de la liste. En HTML, la gestion des listes est très basique et le rendu est (moche) non personnalisable. Nous avons enfin défini notre liste personnalisée, il ne reste plus qu’à l’utiliser 😀

La partie template est la plus importante car elle décrit notre template personnalisé. Le HTML décrit notre menu dont l’affichage dépend du paramètre « visible ». Lui-même contient la liste des item générés par un classique « *ngFor ». Cette ligne permet déclarer une variable « template » et donne accès à l’élément déclaré dans le HTML du composant. La nouvelle ligne « ng-container » utilise l’attribut « *ngTemplateOutlet » pour injecter le « template » définie dans la partie contrôleur. De plus, la propriété « context » permet de décrire un objet contextuel au template.

Flux typique pour ajouter un élément

  1. Déclarer le tableau d'objets dans le composant TypeScript en respectant le typage (type ou interface).
  2. Fournir une méthode publique dans le composant pour ajouter l'élément au tableau (push ou création d'un nouveau tableau immuable).
  3. Relier les contrôles du template (input, bouton) à la méthode via (click) ou (submit).
  4. Utiliser *ngFor dans le template pour rendre la liste et détecter automatiquement les changements.
  5. Gérer la sélection d'un élément et la communication avec le composant parent si nécessaire.

Nous ajoutons également la méthode permettant de sélectionner un élément dans la liste et de le renvoyer vers le composant parent. En résumé, l’input est mis en lecture seule avec une image de flèche positionnée à droite. Enfin, nous allons gérer la visibilité du menu de la liste.

Lire aussi: INPI et Micro-Entreprise : Démarches

Bonnes pratiques pour l'ajout d'éléments

  • AstucesModification Directe : Faites attention lorsque vous modifiez un tableau directement (comme avec splice).
  • Préférez les approches immuables (par exemple créer un nouveau tableau via [...liste, nouvelElement]) si vous utilisez OnPush ou pour éviter des subtilités de détection de changement.
  • Validez et typifiez les objets ajoutés afin d'éviter des erreurs runtime (TypeScript + interfaces/types).
  • Si la liste est liée à un template complexe, déclarez des templates réutilisables et utilisez ngTemplateOutlet et le context pour injecter des données.

Utilisation pratique dans le template

Le début de nom d’attribut « let- » est reconnu par Angular et permet de déclarer une variable locale. C’est la partie qui nous intéresse le plus car elle décrit notre template personnalisé. Cet exemple vous donne la base pour créer des template personnalisé avec répétition.

Exemple résumé d'implémentation

Imaginons un composant Angular dans lequel nous avons défini une liste de sociétés avec leur icône. Pour implémenter notre liste, nous allons créer un composant spécialisé qui va gérer le menu de la liste. Le HTML décrit notre menu dont l’affichage dépend du paramètre « visible ». Lui-même contient la liste des item générés par un classique « *ngFor ».

Nous ajoutons également la méthode permettant de sélectionner un élément dans la liste et de le renvoyer vers le composant parent. Enfin, nous allons gérer la visibilité du menu de la liste.

Tableau récapitulatif : méthodes d'ajout et comportements

Méthode Comportement Usage recommandé
push() Modifie le tableau en place Simple, mais attention à la détection de changement
[...old, new] Crée un nouveau tableau (immuable) Recommandé avec OnPush et meilleures pratiques
splice() Supprime/insère et modifie en place À utiliser avec prudence

Vous souhaitez recevoir de l'aide sur ce sujet ? rejoignez la communauté Angular.fr sur Discord.

Lire aussi: Comment Calculer la TVA ?

balises:

Articles populaires: