Faire une boucle for dans un template Angular 2

Quand on n'a pas d'itérable sous la main

Le blog Makina-corpus

Quand on n'a pas d'itérable sous la main

La seule directive d'itération que propose Angular 2 est *ngFor.
Seulement, parfois, on souhaite simplement générer un nombre donné d'éléments sans avoir un objet à parcourir.

L'astuce consiste à créer un tableau vide mais avec une taille définie.
Pour cela il suffit d'instancier un tableau via le constructeur Array et de lui passer en unique paramètre le nombre voulu.

fakeArray = new Array(12); 

Il ne reste plus qu'à l'utiliser avec la directive *ngFor dans le template :

<ul>
 <li *ngFor="let a of fakeArray">Je crois que je me répète</li>
</ul> 

Il est même possible de récupérer le nombre courant d'itérations via la propriété index :

<li *ngFor="let a of FakeArray; let iteration = index">Iteration n° {{ iteration }}</li> 


Démo plunkr

Formations associées

Front-end

Angular

A distance (foad) Du 23 au 25 février 2022

Voir la formation

Front-end

Angular avancé

A distance (foad) Du 23 au 25 mars 2022

Voir la formation

Actualités en lien

Image
Logo Cypress
11/10/2021

Retour d’expérience : tests fonctionnels avec Cypress

Dans le cadre d'un de nos projets de développement spécifique, l’équipe Makina Corpus a été amenée à coder un important logiciel métier avec de nombreuses entités et règles de gestion : l’Hydroportail.

Voir l'article
29/03/2019

Des boucles de composants génériques avec Angular

Ou comment faire des composants de listes réutilisables avec n'importe quel objet.

Voir l'article
Image
IA_Angular_Universal
08/10/2018

Mettre en place Angular Universal avec Angular 6 et 7

Le fonctionnement d'Angular Universal expliqué. Toutes les étapes de mise en place détaillées. Les pièges à éviter.

Voir l'article

Inscription à la newsletter

Nous vous avons convaincus