Makina Blog

Le blog Makina-corpus

Faire une boucle for dans un template Angular 2


Quand on n'a pas d'itérable sous la main

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

Formations associées

Formations Front end

Formation Angular

Nantes Du 21 au 23 mai 2025

Voir la Formation Angular

Formations Front end

Formation Angular avancé

Nantes Du 1 au 3 octobre 2025

Voir la Formation Angular avancé

Actualités en lien

Géné­rer un fichier PMTiles avec Tippe­ca­noe

28/02/2024

Exemple de géné­ra­tion et d’af­fi­chage d’un jeu de tuiles vecto­rielles en PMTiles à partir de données publiques.

Voir l'article
Image
Capture d'une partie de carte montrant un réseau de voies sur un fond de carte sombre. Au centre, une popup affiche les information de l'un des tronçons du réseau.

Publier une documentation VitePress sur Read The Docs

01/02/2024

À l'origine, le site de documentation Read The Docs n'acceptait que les documentations Sphinx ou MKDocs. Depuis peu, le site laisse les mains libres pour builder sa documentation avec l'outil de son choix. Voici un exemple avec VitePress.

Voir l'article
Image
Read The Docs

Créer une application en tant que composant web avec Stencil

04/04/2023

Mise en place dans le cadre de Geotrek, cette solution permet de se passer d'une iFrame pour afficher une application dans n'importe quel site.

Voir l'article
Image
Widget

Inscription à la newsletter

Nous vous avons convaincus