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
Mise en pratique de RxJS dans Angular Mise en pratique de RxJS dans Angular 24/07/2017

Les quelques bases suffisantes pour bien utiliser RxJS dans Angular 2 et 4.

How to setup Angular Universal How to setup Angular Universal 29/06/2017

Step by step explanation. All the pitfalls to avoid.

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.

SEO : indexing a JavaScript application SEO : indexing a JavaScript application 29/06/2017

How to produce a server-side rendered version of your web application.

SEO : indexer une application Javascript SEO : indexer une application Javascript 29/06/2017

Comment utiliser le code de votre application pour un rendu server-side.