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){
  // return new Array(number);
  return new Array(number).fill(0)
    .map((n, index) => index + 1);
}

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>

Answer 2

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

Answer 3

Depending on the length of the wanted loop, maybe even a more "template-driven" solution:

<ul>
  <li *ngFor="let index of [0,1,2,3,4,5]">
    {{ index }}
  </li>
</ul>

Answer 4

You can do both in one if you use index

<div *ngFor="let item of items; let myIndex = index>
  {{myIndex}}
</div>

With this you can get the best of both worlds.

Answer 5

The better way to do this is creating a fake array in component:

In Component:

fakeArray = new Array(12);

InTemplate:

<ng-container *ngFor = "let n of fakeArray">
     MyCONTENT
</ng-container>

Plunkr here

Answer 6

you can use _.range([optional] start, end). It creates a new Minified list containing an interval of numbers from start (inclusive) until the end (exclusive). Here I am using lodash.js ._range() method.

Example:

CODE

var dayOfMonth = _.range(1,32);  // It creates a new list from 1 to 31.

//HTML Now, you can use it in For loop

<div *ngFor="let day of dayOfMonth">{{day}}</div>

Answer 7

   queNumMin = 23;
   queNumMax= 26;
   result = 0;
for (let index = this.queNumMin; index <= this.queNumMax; index++) {
         this.result = index
         console.log( this.result);
     }

Range min and max number

Answer 8

The best answer for this question I have found here

You need to create an attribute inside your class and reference it to Array object:

export class SomeComponent {
  Arr = Array; //Array type captured in a variable
  num:number = 20;
}

And inside your HTML you can use:

<ul id="next-pages">
    <li class="line" *ngFor="let _ of Arr(10)">&nbsp;</li>
</ul>

Answer 9

for Example let say you have an array called myArray if you want to iterate over it

<ul>
  <li *ngFor="let array of myArray; let i = index">{{i}} {{array}}</li>
</ul>

Answer 10

You can do like this in a simple way,

<div *ngFor="let i of ('a,'.repeat(100).split(','))">
    .....
</div>

('a,'.repeat(100).split(',')) --> it means construct a long concatenated string of a, 100 times and then split it by , results in array of 100 items, which ngFor picks up and iterate 100 times.

Answer 11

1.generate a pipe for example "ng g p range"

transform(length: number):any[]{
        return new Array(length);
    }

2.in html

 <div *ngFor="let _ of (12|range)" >  ...   </div>

Answer 12

If you want to use the object of ith term and input it to another component in each iteration then:

<table class="table table-striped table-hover">
  <tr>
    <th> Blogs </th>
  </tr>
  <tr *ngFor="let blogEl of blogs">
    <app-blog-item [blog]="blogEl"> </app-blog-item>
  </tr>
</table>

Answer 13

If you want duplicate lines multiple time.

You can simply do :-

declare in .ts file

public repeater = "<li>Something</li>";

Then use following to print it .html file.

{{repeater.repeat(5)}}