Way to *ngFor loop defined number of times instead of repeating over array?

Question

Is there a way to *ngFor loop a defined number of times instead of always having to iterate over an array?

For example, I want a list to repeat 5 times, the loop would be something like that in C#;

for (int i = 0; i < 4; i++){

}

Desired result:

<ul>
   <li><span>1</span></li>
   <li><span>2</span></li>
   <li><span>3</span></li>
   <li><span>4</span></li>
   <li><span>5</span></li>
</ul>

one method is as said by @TGH and second one you can use your for loop as mentioned in question then push value of [i] in empty array and start *ngFor on that array this is also possible. you can chose either one from these two way. — Pardeep Jain, Dec 22 '15 at 05:12

score 124 · Answer 1 · edited Sep 14 '17 at 23:26

124

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

export class SampleComponent {
  constructor() {
    this.numbers = Array(5).fill(0).map((x,i)=>i);
  }
}

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:

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

Or shortly:

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

Hope it helps you, Thierry

Edit: Fixed the fill statement and template syntax.

edited Sep 14 '17 at 23:26

Chris Weber

5,555
8
44
52

answered Dec 22 '15 at 05:54

Thierry Templier

198,364
44
396
360

3

I think the `Array(5).fill()...` is missing a 0. It should be `Array(5).fill(0)`. From the docs https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/fill – brijmcq Jul 21 '17 at 15:33
1

The `#number` should be `let number` – Amr Eladawy Jul 28 '17 at 15:55
1

You could also use `Array.from(Array(5)).map((x, i) => i );` to achieve the same without having to use `.fill(0)` – kernel Sep 27 '17 at 12:34
1

You can make it look nicer though: `
{{number}}

Kostas Siabanis

Oct 27 '18 at 08:53

Mitja, that you phrased it like that makes me happy. I needed a laugh. It is kind of pathetic, isn't it?? – Scott Jan 20 '19 at 03:20

As most of cases typescript (or linter) may argue about `x` variable, asking to remove it because it's not using. To fix that you need to write: `Array(columnAmount).fill(0).map(({}, i) => i)` – Arsen Khachaturyan Jan 20 '19 at 11:18

@Mitja that this is still the only solution makes me really sad. – alisonmsmith Mar 28 '19 at 16:06

40

– Noy Oliel May 20 '20 at 17:35

@olNoy this should be an answer, It is currently hidden behind "Show 4 more comments". – Stephen Jul 07 '20 at 20:52

@olNoy's solution should be the right answer IMO. – adamsfamily Aug 12 '20 at 12:13

27

To get exactly what the OP wants (each li containing a sequential number starting at 1), extend @olNoy's answer: ```

``` – Daniel Flippance Oct 07 '20 at 00:06

Way to *ngFor loop defined number of times instead of repeating over array?

1 Answers1

Linked