Angular 2 loop without a collection?

Ionic Framework ionic-v3
1

Hi guys,

I’m having some trouble finding info on this so I’ll try asking here. I hope it’s ok, since it’s not really Ionic 2 related.

I’'m trying to create a simple for-loop like this:
<ion-icon *ngFor="#index of range">

ngFor only seems to work with collections, so in my class, I have to define define “range” like this:
private range:number[] = [1, 2, 3, 4, 5];

This seems iffy to me, and I would much rather have range to be a number constant. Do you guys know if there really is an angular limitation for loops through collections only?

Thanks!
/Daniel

2

Why do you want to loop without a collection? What’s the use case?

You have considered _.range(5)?

I see how an actual number-based loop is cleaner, but I don’t see why it is a significant problem?

3

Are you trying to just declare the range and loop with the values in the range? say range(5) should be like ngFor with [1,2,3,4,5] or you don’t care about the values, just care about the number of iterations?

4

luchillo17, exactly, I don’t care about the values, i just want to print 5 icons like this:
*ngFor="#index of range"

Willb, it’s not a significant problem, I’m learning Angular2 and thought I should ask, since it seems strange to me that I can’t create a simple loop using a set number of iterations without a collection.
Could you please explain _.range(5) a bit?

5

I’m currently working on a dynamic grid that prints icons on a homepage. Take a peek at my code…perhaps it will help. You have to use the ngFor index to help.

<ion-row>
    <ion-col *ngFor="#p of pages; #i = index">
        <button *ngIf="i < 4"  [navPush]="[p.component, p]" primary clear>
             <ion-icon name="{{p.icon}}"></ion-icon>
             {{p.title}}
        </button>
    </ion-col>
 </ion-row>
6

Hi @Zeak,

What you would suggest if I want to go through a collection and want to generate, let say, 4 columns per row where each column represent an item (i) from my collection.

row #  col1  col2  col3  col4
1       i1    i2    i3    i4
2       i5    i6    i7    i8

Thanks in advance

7

I believe you would use the same block of code as above…just change this line to show the items you’d like to appear for each row.

<button *ngIf="i < 4"  [navPush]="[p.component, p]" primary clear>

<button *ngIf="i > 3 && i < 7"  [navPush]="[p.component, p]" primary clear>