Accueil / Blog / Métier / 2016 / Faire une boucle for dans un template Angular 2

Faire une boucle for dans un template Angular 2

Par Simon Bats publié 11/07/2016
Quand on n'a pas d'itérable sous la main
Faire une boucle for dans un template Angular 2

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

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Des boucles de composants génériques avec Angular Des boucles de composants génériques avec Angular 15/04/2019

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

À Makina, la JS fatigue n'existe pas... 01/04/2019

...car la passion l'emporte

Routing Angular : optimisez le rendu au changement de page Routing Angular : optimisez le rendu au changement de page 08/06/2018

Avec les Resolvers, les Guards et les Initializers, découvrez les bonnes pratiques pour éviter ...

Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 13/08/2018

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular. Cet article a été écrit ...

Mettre en place Angular Universal avec Angular 6 et 7 Mettre en place Angular Universal avec Angular 6 et 7 16/10/2018

Le fonctionnement d'Angular Universal expliqué. Toutes les étapes de mise en place détaillées. ...