forEach en Angular

1. Utilisation de .forEach() dans Angular
2. Utilisation de la boucle *ngFor dans Angular

Nous allons introduire la fonction .forEach() dans Angular avec un exemple et l’utiliser pour parcourir les éléments d’un tableau.

Utilisation de .forEach() dans Angular

Le .forEach() est une fonction dans Angular qui appelle une fonction pour chaque élément d’un tableau.

Il n’est pas exécuté pour les tableaux vides. Il est utilisé uniquement dans les fichiers .ts et ne peut pas être utilisé dans le modèle pour afficher des informations dans les fichiers de modèle dans Angular.

La syntaxe de .forEach() est très simple. Commençons par un exemple en créant une nouvelle application à l’aide de la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application en utilisant cette commande :

# angular
cd my-app

Maintenant, exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Nous allons créer un tableau de nombres de 1 à 10.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

Utilisons la fonction .forEach() pour console.log le tableau un par un. Nous allons donc créer une autre variable, num.

# Angular
num = this.numbers.forEach(x => console.log(x));

Production:

Comme on le voit dans l’exemple ci-dessus, on peut utiliser le .forEach() pour appeler une fonction sur chaque élément d’un tableau. Appelons une fonction sur ce tableau au lieu d’utiliser simplement console.log.

Dans cette fonction, nous prendrons la variable x comme paramètre qui sera les éléments du tableau, et nous y ajouterons 10 pour le retourner.

# Angular
function(x){
    x = x + 10; 
    console.log(x);
  }

Nous allons maintenant utiliser .forEach() pour appeler cette fonction sur chaque élément de notre tableau numbers.

# Angular
numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
num = this.numbers.forEach(x => this.function(x));

Production:

Comme on le voit dans l’exemple ci-dessus, la fonction que nous avons transmise à tous les éléments d’un tableau a fonctionné, et elle a ajouté 10 dans chaque élément d’un tableau. Mais nous ne pouvons pas utiliser la fonction .forEach() sur les fichiers de modèle pour parcourir les éléments d’un tableau.

Si nous voulons parcourir les éléments d’un tableau ou d’une liste sur des fichiers modèles, nous pouvons utiliser la boucle *ngFor.

Utilisation de la boucle *ngFor dans Angular

Le *ngFor est une boucle for dans Angular qui parcourt les éléments d’un tableau, d’une liste ou d’un objet, et il peut être utilisé sur des fichiers de modèle pour afficher une liste de données sur notre application Web ou notre site Web.

Nous allons passer en revue un exemple dans lequel nous allons créer une liste de langages de programmation largement utilisés et afficher cette liste dans un fichier de modèle à l’aide de la boucle *ngFor.

Créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application dans Angular, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Exécutons notre application pour vérifier si toutes les dépendances sont correctement installées.

# angular
ng serve --open

Nous allons créer un fichier de classe, language.ts, dans lequel nous allons créer un constructeur pour un langage. Ainsi, le code dans language.ts ressemblera à ci-dessous.

# angular
export class Language {
  constructor(public name: string, public version: string) {}
}

Dans app.component.ts, nous allons importer Language.

# angular
import { Language } from './language';

Nous allons créer une liste de langages de programmation.

# angular
ProgrammingLanguages: Language[] = [
    new Language('Angular', '13.1'),
    new Language('React', '17'),
    new Language('Vue', '3.2'),
    new Language('Node', '17'),
  ];

Dans notre template app.component.html, nous afficherons notre liste à l’aide de la boucle *ngFor.

# angular
<main>
  <h2>Widely Used Programming Languages</h2>
  <section>
    <div *ngFor="let language of ProgrammingLanguages">
      <div class="list">
        <h2>{{ language.name }}</h2>
        <p>{{ language.version }}</p>
      </div>
    </div>
  </section>
</main>

Dans app.component.css, nous allons écrire du CSS pour rendre notre sortie propre et facile à comprendre.

# angular
.list {
  padding: 5px;
  text-align: center;
  background-color: white;
  border: 1px solid black;
  margin-bottom: 5px;
  margin-left: 5px;
  width: 45%;
  float: left;
}

Production:

Dans ce tutoriel, nous avons appris comment utiliser la fonction .forEach() pour parcourir les éléments d’un tableau dans des fichiers typescript et comment utiliser la boucle *ngFor pour parcourir les éléments d’un tableau , objet ou une liste dans des fichiers modèles et afficher des données sur le frontend de nos applications Web ou sites Web.