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

React 16.3 : Introduction de la context API React 16.3 : Introduction de la context API 06/04/2018

React 16.3 apporte son lot de nouveautés, mais surtout la version stable de la context API.

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