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

Faire une boucle for dans un template Angular 2

Par sba — 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
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 ...

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.

Découverte de React Native Découverte de React Native 18/04/2016

Présentation de React Native, quelles sont ses possibilités et peut-on l'utiliser en prod ?

Bien démarrer avec JavaScript Bien démarrer avec JavaScript 15/12/2015

Callbacks, this, scope... mais qu'est-ce que c'est que ce langage ?

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, 4 ou 5.