Angular 2: How to write a for loop, not a foreach loop

Question

Using Angular 2, I want to duplicate a line in a template multiple times. Iterating over an object is easy, *ngFor="let object of objects". However, I want to run a simple for loop, not a foreach loop. Something like (pseudo-code):

{for i = 0; i < 5; i++}   <li>Something</li> {endfor} 

How would I do this?

Answer 1

You could dynamically generate an array of however time you wanted to render <li>Something</li>, and then do ngFor over that collection. Also you could take use of index of current element too.

Markup

<ul>    <li *ngFor="let item of createRange(5); let currentElementIndex=index+1">       {{currentElementIndex}} Something    </li> </ul> 

Code

createRange(number){   // var items: number[] = [];   // for(var i = 1; i <= number; i++){   //   items.push(i);   // }   // return items;   return new Array(number); } 

Demo Here

Under the hood angular de-sugared this *ngFor syntax to ng-template version.

<ul>     <ng-template ngFor let-item [ngForOf]="createRange(5)" let-currentElementIndex="(index + 1)" [ngForTrackBy]="trackByFn">       {{currentElementIndex}} Something     </ng-template> </ul>