Angular 2: How to write a for loop, not a foreach loop
AngularAngular2 TemplateAngular Problem Overview
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?
Angular Solutions
Solution 1 - Angular
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);
}
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>
Solution 2 - Angular
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.
Solution 3 - Angular
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.
Solution 4 - Angular
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>
Solution 5 - Angular
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>
Solution 6 - Angular
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>
Solution 7 - Angular
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
Solution 8 - Angular
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>
Solution 9 - Angular
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>
Solution 10 - Angular
You can simply do :-
{{"<li>Something</li>".repeat(5)}}