angularangular2-template

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

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?

Solution

  • You can instantiate an empty array with a given number of entries if you pass an int to the Array constructor and then iterate over it via ngFor.

    In your component code :

    export class ForLoop {
  fakeArray = new Array(12);
}

    In your template :

    <ul>
  <li *ngFor="let a of fakeArray; let index = index">Something {{ index }}</li>
</ul>

    The index properties give you the iteration number.

    Live version