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

Contenus corrélés

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
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. ...

Comment mettre en place Angular Universal Comment mettre en place Angular Universal 29/06/2017

Toutes les étapes détaillées et expliquées. Les pièges à éviter.

Les nouveautés de Typescript 3.0 Les nouveautés de Typescript 3.0 13/08/2018

Typescript 3.0 vient de sortir, voici quelques nouveautés... et des exemples !

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 ...

Ionic 2 : les nouveautés (retours de l'AngularConnect) Ionic 2 : les nouveautés (retours de l'AngularConnect) 23/10/2015

Des changements radicaux et bienvenus par rapport à la version 1 d'Ionic.