Introduction à la directive ngFor en angulaire

Dans cet article, vous serez initié au bouclage de listes dans Angular en utilisant la directive ngFor et des mots-clés comme index first et last .

] Avant de commencer

Pour pouvoir suivre la démonstration de cet article, vous devez avoir:

• Un environnement de développement intégré comme VS Code
• Node version 11.0 ou supérieure installée sur votre ordinateur
• Node Package Manager version 6.7 (généralement livrée avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• La dernière version d'Angular

Téléchargez le projet de démarrage de ce didacticiel ici pour suivre les manifestations. Décompressez le projet et initialisez les modules de nœuds dans votre terminal avec cette commande:

npm install

D'autres choses qui sont intéressantes sont:

• Une connaissance pratique du framework Angular à un niveau débutant [19659013] Conditionnelles

  Lors de la construction de vos applications et de la création de la logique, vous souhaitez parfois faire des comparaisons entre deux ou plusieurs choses. Ce peuvent être des choses abstraites; il peut s'agir d'éléments d'une liste ou d'un tableau ou même d'un objet. Angular fournit des directives pour gérer ces situations appelées conditionnelles. Il y a donc ngIf pour les moments où vous voulez vérifier une valeur vraie ou fausse, et il y a ngFor principalement pour une liste d'éléments dans un objet ou un tableau. ] Pour l'instruction

  En JavaScript, il y a l'instruction pour et dans Angular cette instruction pour s'appelle la directive ngFor . Il est utilisé pour parcourir une liste d'éléments et il est ajouté à l'élément HTML où la liste doit être affichée. La syntaxe ressemble à ceci:

  Démo: ce que nous construisons

  Pour bien comprendre le fonctionnement de la directive ngFor, voyons une application simple affichant une liste de céréales populaires. Si vous avez suivi ce message depuis le début, vous auriez téléchargé et ouvert l'application de canevas dans votre application VS Code.

  Accédez au fichier HTML du composant de l'application et remplacez le contenu par le bloc de code ci-dessous:

   < div   style  = " text-align :  center "  > 
    < h1 > [19659029]Bienvenue
    </  h1 > 
   </  div > 
   < h2 >  10 principales marques de céréales  </  h2 > 
   < app-test >   </  app-test > 
   < sortie de routeur >   </  sortie de routeur > 
  

  Pour faire notre illustration, créez un nouveau composant de test dans le projet avec la CLI en exécutant la commande ci-dessous:

   ng generate component test 

  Ceci génère un nouveau composant et le configure dans le module app. Votre fichier test.component.ts devrait ressembler à celui-ci ci-dessous:

   import {Component, OnInit} from '@ angular / core';
  @Composant({
    sélecteur: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.css']
  })
  la classe d'exportation TestComponent implémente OnInit {
    céréales: au choix [] = [
      {
        name:'Honey Nut Cheerios',
        maker: 'General Mills'
      },
      {
        name:'Frosted Flakes',
        maker: 'Kelloggs'
      },
      {
        name:'Honey bunches of Oats',
        maker: 'Post'
      },
      {
        name:'Cheerios',
        maker: 'General Mills'
      },
      {
        name:'Cinnamon Tosat Crunch',
        maker: 'General Mills'
      },
      {
        name:'Special K',
        maker: 'Kelloggs'
      },
      {
        name:'Frosted Mini Wheats',
        maker: 'Kelloggs'
      }
    ]
  constructeur () {}
  ngOnInit () {
    }
  }
  

  Pour afficher ces céréales sans la directive ngFor, ouvrez votre fichier test.component.html et remplacez le contenu par le bloc de code ci-dessous:

   < ul > 
     < li > 
       < h2 > 
      {{céréales [0] .name}}
      </  h2 > 
     </  li > 
     < li > 
       < h2 > 
      {{céréales [1] .name}}
       </  h2 > 
      </  li > 
       < li > 
       < h2 > 
      {{céréales [2] .nom}}
       </  h2 > 
      </  li > 
       < li > 
       < h2 > 
      {{céréales [3] .nom}}
       </  h2 > 
      </  li > 
       < li > 
       < h2 > 
      {{céréales [4] .nom}}
       </  h2 > 
      </  li > 
       < li > 
       < h2 > 
      {{céréales [5] .nom}}
       </  h2 > 
      </  li > 
       < li > 
       < h2 > 
      {{céréales [6] .nom}}
       </  h2 > 
      </  li > 
   </  ul > 
  

  Si vous exécutez l'application maintenant dans votre serveur de développement avec la commande serve:

   ng serve 

  Vous voyez qu'il affiche une liste de céréales dans les polices d'en-tête. En regardant en arrière le bloc de code dans le fichier HTML, vous pouvez voir qu'il y a beaucoup de répétitions. La directive ngFor garantit que vous pouvez afficher les éléments de la liste de manière plus dynamique et efficace avec beaucoup moins de lignes de code et sans répétition.

  Remplacez le contenu de votre fichier test.component.html par le bloc de code ci-dessous:

   < ul > 
     < li   * ngFor  =  " let céréale de céréales "  > 
       < h2 > 
      {{cereal.name}}
      </  h2 > 
     </  li > 
   </  ul > 
  

  Cela renvoie la même liste exacte lorsque vous réexécutez l'application sur le serveur de développement, mais avec beaucoup moins de code. Avec la directive ngFor, vous pouvez parcourir une liste d'éléments dans une collection (un tableau dans notre cas) et les afficher comme vous le feriez pour des éléments uniques.

  Les mots-clés let et de seront toujours présents dans votre déclaration ngFor. La section céréales est le nom de votre collection. Si vous archivez le fichier test.component.ts, vous verrez que le nom du tableau est cereals . La céréale est le nouveau nom que vous voulez attribuer à l'élément à chaque itération, tout comme vous auriez céréales [0]. Le nouveau nom est important, car c'est ce que vous allez maintenant utiliser pour accéder aux éléments de la liste.

  Index dans les directives ngFor

  Angular fournit également des fonctionnalités supplémentaires pour la directive ngFor – l'une d'elles est l'index. Ceci est utilisé pour spécifier l'index des éléments en boucle. Donc, si vous voulez compter l'index des éléments de la liste, vous pouvez l'utiliser comme ceci:

   < ul > 
     < li   * ngFor  =  " let céréales de céréales; let i = index "  > 
       < h2 > 
      {{cereal.name}} à la position {{i}}
      </  h2 > 
     </  li > 
   </  ul > 
  

  La sortie ressemblera maintenant à ceci dans le navigateur:

  

  Pour corriger cela pour compter à partir de un au lieu de zéro, effectuez les modifications ci-dessous:

   < ul > 
     < li   * ngFor  =  " let céréales de céréales; let i = index "  > 
       < h2 > 
      {{cereal.name}} à la position {{i + 1}}
      </  h2 > 
     </  li > 
   </  ul > 
   

  Premier et dernier dans les directives ngFor

  Une autre fonctionnalité intéressante comme l'index utilise les mots clés first et last . Ils sont utilisés pour cibler respectivement le tout premier et le dernier élément de tout affichage de directive ngFor. Donc, pour notre démo, si nous voulons souligner le premier et tracer une ligne à travers les derniers éléments de la liste dans notre sortie, voici comment nous le faisons:

   < ul > 
    
  
      < h2 > 
      {{cereal.name}}
      </  h2 > 
     </  li > 
   </  ul > 
  

  Ceci est déclaré comme l'index mais ici il est utilisé avec le ngClass pour lui assigner des classes CSS. Pour ajouter les règles CSS, allez dans le fichier test.component.css et ajoutez les règles suivantes:

   .underline   {
       text-decoration :  underline  ; 
  } 
   .line   {
       text-decoration :  line-through ; 
  } 
  

  

  Le code complet de ce tutoriel peut être trouvé ici sur GitHub .

  Conclusion

  Dans ce post, vous ont été introduits à la directive ngFor dans Angular et à quel point elle est importante pour l'écriture de code dynamique et efficace. On vous a également montré comment l'utiliser avec des illustrations pratiques et des exemples de code. Des fonctionnalités supplémentaires vous ont également été présentées afin que vous puissiez pleinement utiliser la puissance de la directive. Bon piratage!