Angular 2 - NgFor using numbers instead collections

Question

...for example...

<div class="month" *ngFor="#item of myCollection; #i = index">
...
</div>

Is possible to do something like...

<div class="month" *ngFor="#item of 10; #i = index">
...
</div>

...without appeal to a non elegant solution like:

<div class="month" *ngFor="#item of ['dummy','dummy','dummy','dummy','dummy',
'dummy','dummy','dummy']; #i = index">
...
</div>

?

I have the same problem. Really upset one cannot do such simple things with angular 2. — albanx, Jul 04 '16 at 15:53
Maybe this can be helpful: https://stackoverflow.com/questions/3895478/does-javascript-have-a-method-like-range-to-generate-a-range-within-the-supp — Pizzicato, Jun 05 '18 at 08:23

score 290 · Accepted Answer · edited Dec 11 '17 at 08:04

290

Within your component, you can define an array of number (ES6) as described below:

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill().map((x,i)=>i); // [0,1,2,3,4]
    this.numbers = Array(5).fill(4); // [4,4,4,4,4]
  }
}

See this link for the array creation: Tersest way to create an array of integers from 1..20 in JavaScript.

You can then iterate over this array with ngFor:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of numbers">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

Or shortly:

@Component({
  template: `
    <ul>
      <li *ngFor="let number of [0,1,2,3,4]">{{number}}</li>
    </ul>
  `
})
export class SampleComponent {
  (...)
}

edited Dec 11 '17 at 08:04

TheUnreal

23,434
46
157
277

answered Apr 01 '16 at 10:47

Thierry Templier

198,364
44
396
360

7

Yeah, Thierry ! It's not your fault, indeed, but still on the same context :( It's not elegant at all. But since you are a very skilled A2 developer, I can assume that there is no better solution. It's sad ! – Marco Jr Apr 01 '16 at 10:49
In fact, there is nothing for this in Angular2 in the loop syntax. You need to leverage what JavaScript provides to build arrays. For example: `Array(5).fill(4)` to create `[4,4,4,4,4]` – Thierry Templier Apr 01 '16 at 11:00
3

PS: @View annotation has been removed in angular2 beta 10 and above. – Pardeep Jain Apr 01 '16 at 11:15
25

Using `Array.fill()` in Angular 2 Typescript produces the following error `Supplied parameters do not match any signature of call t arget.` — Checking the Array.prototype.fill docs, it says it requires 1 argument... https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/fill – Joshua Russell Mar 12 '17 at 23:11
An alternative would be to use this: `Array.apply(null, {length: 5}).map(Number.call, Number)`. The result is `[0,1,2,3,4]` – Laurent Jacquot Jun 09 '17 at 23:30
In Angular 2 TypeScript you can use: Array(32).fill(1, 1, 32).map((x, i) => i); // monthdays from1 to 31 – Axel Schmitz Oct 25 '17 at 06:08
19

`Array(5).fill(1).map((x, i) => i + 1); /*[1,2,3,4,5]*/` this resolves the error in TS – mshahbazm Mar 27 '18 at 15:06
Hi friend but if I want to use fill()map() and start from 0, because if I start limit 5 for exemplo its return to me 0,1,2,3,4 if I want 1,2,3,4,5 ? – Rafael Moura Aug 26 '18 at 19:13
I don't know why would you use fill, I feel like the most readable alternative is `Array.from({ length: N });` which in addition accept an optional second parameter that is a map function. example: for creating an array of numbers you would simply `Array.from({length: N}, (_,k) => k )` which i find even more readable other than simpler, but This is my opinion. – Valex Jul 25 '19 at 14:28
Can I use `
{{tag}}

Tanzeel

Sep 14 '19 at 04:25

Had to use parseInt because my number was a string & had to add +1 at the end because I wanted to iterate from 1, not 0. Array(parseInt(this.product.size_1_maxqty)).fill().map((x,i)=>i+1) – Grant Jul 17 '20 at 03:47

Above does a tiny bit of extra work (fills with undefined) but is relatively minor vis-a-vis the speedup you can achieve by using a for loop, and if you forget the .fill you may be confused why your array is mysteriously [empty x 5]. You can encapsulate the above as a custom function, or alternatively use a somewhat more intended method: ```Array.from(Array(5),(x,i)=>i)``` – Muhammad Abdullah Oct 13 '22 at 07:42

jcairney · Answer 2 · 2022-03-25T14:14:34.940

@OP, you were awfully close with your "non-elegant" solution.

How about:

<div class="month" *ngFor="let item of [].constructor(10); let i = index">
...
</div>

Here I'm getting the Array constructor from an empty array: [].constructor, because Array isn't a recognized symbol in the template syntax, and I'm too lazy to do Array=Array or counter = Array in the component typescript like @pardeep-jain did in his 4th example. And I'm calling it without new because new isn't necessary for getting an array out the Array constructor.

Array(30) and new Array(30) are equivalent.

The array will be empty, but that doesn't matter because you really just want to use i from ;let i = index in your loop.

Edit to respond to comments:

Q. How can I use a variable to set the length of the NgFor loop?

Here is an example on how to render a table with variable columns/rows

<table class="symbolTable">
  <tr *ngFor="let f of [].constructor(numRows); let r = index">
    <td class="gridCell" *ngFor="let col of [].constructor(numCols); let c = index">
      {{gridCards[r][c].name}}
    </td>
  </tr>
</table>

export class AppComponent implements OnInit {
  title = 'simbologia';
  numSymbols = 4;
  numCols = 5;
  numRows = 5;
  guessCards: SymbolCard[] = [];
  gridCards: SymbolCard[][] = [];

  ngOnInit(): void {
    for (let c = 0; c < this.numCols; c++) {
      this.guessCards.push(new SymbolCard());
    }

    for (let r = 0; r < this.numRows; r++) {
      let row: SymbolCard[] = [];

      for (let c = 0; c < this.numCols; c++) {
        row.push(
          new SymbolCard({
            name: '' + r + '_' + c
          }))
      }
      this.gridCards.push(row);
    }
  }
}

This solution triggers change detection. I guess due to the new Array. — Tobias81, Dec 18 '18 at 08:31
@Tobias81, could you elaborate? Are you saying that every time the app runs change detection, the contents of the *ngFor are redrawn because the array is recreated? That's definitely worth noting. One could get around it by actually creating an array field in the TS to reference so it's the same each time change detection runs. But that would be definitely less elegant than desired. Is the same change detection issue present in the 2nd example in Thierry Templier's selected answer? `
@Tobias81, I've checked to make sure change detection doesn't recreate the contents of the ngFor repeatedly, by putting a print statement inside the constructor of a component that I create as a child of the example ngFor directive. I do not see the components being recreated on every Change Detection iteration, so I don't think there is actually a problem (at least in Angular 8). — jcairney, Mar 29 '20 at 17:54
works great with a hardcoded value but when I try using a variable it didn't work as expected. If you can give an example of how to use a variable that would be great — Royer Adames, Jan 05 '22 at 18:39
It does work with variable values, no problem, I have updated the answer to show that — Mauricio Gracia Gutierrez, Mar 13 '22 at 16:37

score 112 · Answer 3 · edited Dec 07 '20 at 18:01

112

No there is no method yet for NgFor using numbers instead collections, At the moment, *ngFor only accepts a collection as a parameter, but you could do this by following methods:

Using pipe

demo-number.pipe.ts:

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value, args:string[]) : any {
    let res = [];
    for (let i = 0; i < value; i++) {
        res.push(i);
      }
      return res;
  }
}

For newer versions you'll have to change your imports and remove args[] parameter:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'demoNumber'})
export class DemoNumber implements PipeTransform {
  transform(value) : any {
    let res = [];
    for (let i = 0; i < value; i++) {
        res.push(i);
      }
      return res;
  }
}

html:

<ul>
  <li>Method First Using PIPE</li>
  <li *ngFor='let key of 5 | demoNumber'>
    {{key}}
  </li>
</ul>

Using number array directly in HTML(View)

<ul>
  <li>Method Second</li>
  <li *ngFor='let key of  [1,2]'>
    {{key}}
  </li>
</ul>

Using Split method

<ul>
  <li>Method Third</li>
  <li *ngFor='let loop2 of "0123".split("")'>{{loop2}}</li>
</ul>

Using creating New array in component

<ul>
  <li>Method Fourth</li>
  <li *ngFor='let loop3 of counter(5) ;let i= index'>{{i}}</li>
</ul>

export class AppComponent {
  demoNumber = 5 ;
  
  counter = Array;
  
  numberReturn(length){
    return new Array(length);
  }
}

#Working demo

edited Dec 07 '20 at 18:01

Emeric

6,315
2
41
54

answered Apr 01 '16 at 12:41

Pardeep Jain

84,110
37
165
215

4

You could also use the `Array.fill()` method for generating the array instead of `res.push()` like shown in Thierrys answer. – Günter Zöchbauer Apr 01 '16 at 12:43
yeah i can but is there anything wrong with `push` ? i mean both methods are correct but still if any diff. between them. – Pardeep Jain Apr 01 '16 at 12:46
3

No, still a nice solution +1. I just find the `Array.fill()` more elegant than the loop using push and it's also probably more efficient. – Günter Zöchbauer Apr 01 '16 at 12:48
2

I like this solution with `counter = Array`, very smart ;) – Verri Aug 29 '18 at 20:55
`error TS2554: Expected 2 arguments, but got 1.` when using your pipe. – Emeric Dec 06 '20 at 17:54
have you changed the imports as per new versions? – Pardeep Jain Dec 07 '20 at 10:00
1

Sure `import { Pipe, PipeTransform } from '@angular/core';`. Edit: Ok I got it, gonna edit your post for newer versions. – Emeric Dec 07 '20 at 17:54

score 12 · Answer 4 · answered Nov 26 '16 at 20:45

12

I couldn't bear the idea of allocating an array for plain repeat of components, so I've written a structural directive. In simplest form, that doesn't make the index available to the template, it looks like this:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({ selector: '[biRepeat]' })
export class RepeatDirective {

  constructor( private templateRef: TemplateRef<any>,
             private viewContainer: ViewContainerRef) { }

  @Input('biRepeat') set count(c:number) {
    this.viewContainer.clear();
    for(var i=0;i<c;i++) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    }
  }
}

http://plnkr.co/edit/bzoNuL7w5Ub0H5MdYyFR?p=preview

answered Nov 26 '16 at 20:45

pdudits

896
6
9

I agree the array approach is ugly, but this seems like premature optimization to me. – Aluan Haddad Feb 27 '17 at 02:21
3

Of course, but also an exercise in writing a directive. On the other hand it is not longer than the pipe, which would be second sane approach. – pdudits Mar 01 '17 at 12:13
That's a good point, there aren't a lot of opportunities to get some of your with the concept of custom structural directives. – Aluan Haddad Mar 01 '17 at 13:05
Nice one @pdudits - Still works with latest versions: https://plnkr.co/edit/8wJtkpzre3cBNokHcDL7?p=preview [feel free to update your plnkr] – A T Oct 12 '17 at 06:12

score 11 · Answer 5 · answered Mar 05 '19 at 14:28

11

you can also use like that

export class SampleComponent {
   numbers:Array<any> = [];
   constructor() {
      this.numbers = Array.from({length:10},(v,k)=>k+1);
   }
}

HTML

<p *ngFor="let i of numbers">
   {{i}}
</p>

answered Mar 05 '19 at 14:28

Tonmoy Nandy

371
4
9

yooloobooy · Answer 6 · 2021-01-15T19:05:11.950

10

Use a pipe to transform the number to an array.

@Pipe({
  name: 'enumerate',
})
export class EnumeratePipe implements PipeTransform {
  transform(n: number): number[] {
    return [...Array(n)].map((_,i) => i);
  }
}

Then use the pipe in your template.

<p *ngFor="let i of 5 | enumerate">
   Index: {{ i }}
</p>

https://stackblitz.com/edit/angular-ivy-pkwvyw?file=src/app/app.component.html

edited Jan 15 '21 at 19:05

answered Oct 08 '20 at 01:47

yooloobooy

493
6
12

1

value is not accessible in the ngFor – Reza Jan 12 '21 at 01:58
check the stackblitz – yooloobooy Jan 13 '21 at 18:17
1

I mean if you need to print 1,2,3,4,5 – Reza Jan 14 '21 at 01:24

score 8 · Answer 7 · answered Sep 10 '19 at 09:57

8

This can also be achieved like this:

HTML:

<div *ngFor="let item of fakeArray(10)">
     ...
</div>

Typescript:

fakeArray(length: number): Array<any> {
  if (length >= 0) {
    return new Array(length);
  }
}

Working Demo

answered Sep 10 '19 at 09:57

Adrita Sharma

21,581
10
69
79

Do not do this, the method fakeArray will be called at each change detection. If you want to use methods in templates like this, pure pipes are the way to go instead. – HugoPrunaux Nov 17 '21 at 17:02
fakeArray doesn't compile because there is no else statement. – Vitaly Sazanovich Aug 20 '23 at 12:22

score 5 · Answer 8 · answered Feb 24 '18 at 11:09

I solved it like this using Angular 5.2.6 and TypeScript 2.6.2:

class Range implements Iterable<number> {
    constructor(
        public readonly low: number,
        public readonly high: number,
        public readonly step: number = 1
    ) {
    }

    *[Symbol.iterator]() {
        for (let x = this.low; x <= this.high; x += this.step) {
            yield x;
        }
    }
}

function range(low: number, high: number) {
    return new Range(low, high);
}

It can be used in a Component like this:

@Component({
    template: `<div *ngFor="let i of r">{{ i }}</div>`
})
class RangeTestComponent {
    public r = range(10, 20);
}

Error checking and assertions omitted on purpose for brevity (e.g. what happens if step is negative).

Are there are any ways in html as of `
` may be – Nithila Shanmugananthan Aug 31 '18 at 08:54 — Nithila Shanmugananthan, Aug 31 '18 at 08:54

score 4 · Answer 9 · answered May 08 '17 at 20:53

4

You can use lodash:

@Component({
  selector: 'board',
  template: `
<div *ngFor="let i of range">
{{i}}
</div>
`,
  styleUrls: ['./board.component.css']
})
export class AppComponent implements OnInit {
  range = _.range(8);
}

I didn't test code but it should work.

answered May 08 '17 at 20:53

Alex Po

1,837
1
24
28

Are there are any ways in html as of `
` may be – Nithila Shanmugananthan Aug 31 '18 at 08:55
If you need `i` or index in a code then you can do `*ngFor="let i of range; let i = index"` – Alex Po Aug 31 '18 at 12:26

score 3 · Answer 10 · answered Oct 15 '19 at 14:49

3

<div *ngFor="let number of [].constructor(myCollection)">
    <div>
        Hello World
    </div>
</div>

This is a nice and quick way to repeat for the amount of times in myCollection.

So if myCollection was 5, Hello World would be repeated 5 times.

answered Oct 15 '19 at 14:49

Jake Mahy

31
2

1

I liked this solution because do not touch in the component. Thanks! – Rafael S. Fijalkowski Jan 02 '21 at 16:32

score 3 · Answer 11 · answered Sep 24 '21 at 15:39

3

My-component.ts

numbers: number[] = [];

constructor() {
  this.numbers = new Array<number>(10)
}

My-component.html

<div *ngFor="let num of numbers; let i = index">{{ i }}</div>

answered Sep 24 '21 at 15:39

faye.babacar78

774
7
12

score 2 · Answer 12 · answered Mar 30 '19 at 09:13

Since the fill() method (mentioned in the accepted answer) without arguments throw an error, I would suggest something like this (works for me, Angular 7.0.4, Typescript 3.1.6)

<div class="month" *ngFor="let item of items">
...
</div>

In component code:

this.items = Array.from({length: 10}, (v, k) => k + 1);

Rafi Henig · Answer 13 · 2019-10-26T20:15:47.117

Using custom Structural Directive with index:

According Angular documentation:

createEmbeddedView Instantiates an embedded view and inserts it into this container.

abstract createEmbeddedView(templateRef: TemplateRef, context?: C, index?: number): EmbeddedViewRef.
Param          Type           Description
templateRef    TemplateRef    the HTML template that defines the view.
context        C              optional. Default is undefined.
index          number         the 0-based index at which to insert the new view into this container. If not specified, appends the new view as the last entry.

When angular creates template by calling createEmbeddedView it can also pass context that will be used inside ng-template.

Using context optional parameter, you may use it in the component, extracting it within the template just as you would with the *ngFor.

app.component.html:

<p *for="number; let i=index; let c=length; let f=first; let l=last; let e=even; let o=odd">
  item : {{i}} / {{c}}
  <b>
    {{f ? "First,": ""}}
    {{l? "Last,": ""}}
    {{e? "Even." : ""}}
    {{o? "Odd." : ""}}
  </b>
</p>

for.directive.ts:

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

class Context {
  constructor(public index: number, public length: number) { }
  get even(): boolean { return this.index % 2 === 0; }
  get odd(): boolean { return this.index % 2 === 1; }
  get first(): boolean { return this.index === 0; }
  get last(): boolean { return this.index === this.length - 1; }
}

@Directive({
  selector: '[for]'
})
export class ForDirective {
  constructor(private templateRef: TemplateRef<any>, private viewContainer: ViewContainerRef) { }

  @Input('for') set loop(num: number) {
    for (var i = 0; i < num; i++)
      this.viewContainer.createEmbeddedView(this.templateRef, new Context(i, num));
  }
}

Jan Clemens Stoffregen · Answer 14 · 2017-07-26T13:23:34.990

0

Please find attached my dynamic solution if you want to increase the size of an array dynamically after clicking on a button (This is how I got to this question).

Allocation of necessary variables:

  array = [1];
  arraySize: number;

Declare the function that adds an element to the array:

increaseArrayElement() {
   this.arraySize = this.array[this.array.length - 1 ];
   this.arraySize += 1;
   this.array.push(this.arraySize);
   console.log(this.arraySize);
}

Invoke the function in html

  <button md-button (click)="increaseArrayElement()" >
      Add element to array
  </button>

Iterate through array with ngFor:

<div *ngFor="let i of array" >
  iterateThroughArray: {{ i }}
</div>

edited Jul 26 '17 at 13:23

answered Jul 26 '17 at 13:18

Jan Clemens Stoffregen

831
10
9

Are there are any ways in html as of `
` may be – Nithila Shanmugananthan Aug 31 '18 at 08:54
you have to iterate over an array. If you need the scalar, you can iterate over an array with the right size and instantiate a scalar in addition: *ngFor="let item of array; let i = index" – Jan Clemens Stoffregen Sep 03 '18 at 08:47

Alok Panday · Answer 15 · 2018-05-22T04:48:05.137

A simplest way that i have tried

You can also create an array in your component file and you can call it with *ngFor directive by returning as an array .

Something like this ....

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-morning',
  templateUrl: './morning.component.html',
  styleUrls: ['./morning.component.css']
})
export class MorningComponent implements OnInit {

  arr = [];
  i: number = 0;
  arra() {
    for (this.i = 0; this.i < 20; this.i++) {
      this.arr[this.i]=this.i;
    }
    return this.arr;
  }

  constructor() { }

  ngOnInit() {
  }

}

And this function can be used in your html template file

<p *ngFor="let a of arra(); let i= index">
value:{{a}} position:{{i}}
</p>

Are there are any ways in html as of `
` may be – Nithila Shanmugananthan Aug 31 '18 at 08:53 — Nithila Shanmugananthan, Aug 31 '18 at 08:53

score 0 · Answer 16 · answered Nov 30 '21 at 20:25

0

Here is something quite clean and simple for Angular:

In .ts:

max = 10;

In .html:

<div *ngFor="let dummy of ','.repeat(max).split(','); index as ix">
   - {{ix + 1}}:
</div>

answered Nov 30 '21 at 20:25

Felix

1,662
2
18
37

score 0 · Answer 17 · answered Apr 12 '22 at 07:20

0

I think the simple and short solution is here..

Your my.component.ts file

setArrayFromNumber(i: number) {
  return new Array(i);
}

Your my.component.html file

<li *ngFor='let in of setArrayFromNumber(5); let i = index'>{{ i }}</li>

That's it!!

answered Apr 12 '22 at 07:20

Omkar Hande

71
1
4

Angular 2 - NgFor using numbers instead collections

17 Answers17

Using pipe

Using number array directly in HTML(View)

Using Split method

Using creating New array in component

Using custom Structural Directive with index:

Linked

Related