Angular 2 - NgFor using numbers instead collections

Question

for example      lt div class  month   ngFor   item of myCollection   i   index  gt       lt  div gt    Is possible to do something like      lt div class  month   ngFor   item of 10   i   index  gt       lt  div gt       without appeal to a non elegant solution like    lt div class  month   ngFor   item of   dummy   dummy   dummy   dummy   dummy    dummy   dummy   dummy     i   index  gt       lt  div gt

User · Answer

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));
  }
}

User · Answer

lt div  ngFor  let number of    constructor myCollection   gt       lt div gt          Hello World      lt  div gt   lt  div gt    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

User · Answer

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     lt button md-button  click   increaseArrayElement     gt        Add element to array    lt  button gt    Iterate through array with ngFor    lt div  ngFor  let i of array   gt    iterateThroughArray     i     lt  div gt

User · Answer

You can use lodash    Component     selector   board     template     lt div  ngFor  let i of range  gt    i    lt  div gt       styleUrls      board component css      export class AppComponent implements OnInit     range     range 8       I didn t test code but it should work

User · Answer

My solution   export class DashboardManagementComponent implements OnInit      cols   5     rows   10    constructor          ngOnInit            get cols         return Array this  cols  fill null  map  el  index    gt  index         get rows         return Array this  rows  fill null  map  el  index    gt  index         In html    lt div class  charts-setup  gt     lt div class  col   ngFor  let col of cols  let colIdx   index  gt       lt div class  row   ngFor  let row of rows  let rowIdx   index  gt        Col    colIdx    row    rowIdx        lt  div gt     lt  div gt   lt  div gt

User · Answer

I solved it like this using Angular 5 2 6 and TypeScript 2 6 2   class Range implements Iterable lt number gt        constructor          public readonly low  number          public readonly high  number          public readonly step  number   1                      Symbol iterator              for  let x   this low  x  lt   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    lt div  ngFor  let i of r  gt    i    lt  div gt      class RangeTestComponent       public r   range 10  20       Error checking and assertions omitted on purpose for brevity  e g  what happens if step is negative

User · Answer

OP  you were awfully close with your  non-elegant  solution   How about    lt div class  month   ngFor  let item of    constructor 10   let i   index  gt       lt  div gt   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

User · Answer

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  lt  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   lt p  ngFor  let a of arra    let i  index  gt  value   a   position   i    lt  p gt

User · Answer

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 lt any gt                private viewContainer  ViewContainerRef          Input  biRepeat   set count c number        this viewContainer clear        for var i 0 i lt c i            this viewContainer createEmbeddedView this templateRef                 http   plnkr co edit bzoNuL7w5Ub0H5MdYyFR p preview

User · Answer

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  lt  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  lt  value  i              res push i                 return res         html   lt ul gt     lt li gt Method First Using PIPE lt  li gt     lt li  ngFor  let key of 5   demoNumber  gt        key      lt  li gt   lt  ul gt   Using number array directly in HTML View   lt ul gt     lt li gt Method Second lt  li gt     lt li  ngFor  let key of   1 2   gt        key      lt  li gt   lt  ul gt   Using Split method  lt ul gt     lt li gt Method Third lt  li gt     lt li  ngFor  let loop2 of  quot 0123 quot  split  quot  quot    gt   loop2   lt  li gt   lt  ul gt   Using creating New array in component  lt ul gt     lt li gt Method Fourth lt  li gt     lt li  ngFor  let loop3 of counter 5   let i  index  gt   i   lt  li gt   lt  ul gt   export class AppComponent     demoNumber   5        counter   Array       numberReturn length       return new Array length           Working demo

User · Answer

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   gt 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         lt ul gt         lt li  ngFor  let number of numbers  gt   number   lt  li gt       lt  ul gt         export class SampleComponent               Or shortly    Component     template         lt ul gt         lt li  ngFor  let number of  0 1 2 3 4   gt   number   lt  li gt       lt  ul gt         export class SampleComponent

User · Answer

you can also use like that  export class SampleComponent      numbers Array lt any gt           constructor           this numbers   Array from  length 10   v k   gt k 1            HTML   lt p  ngFor  let i of numbers  gt       i    lt  p gt

User · Answer

This can also be achieved like this   HTML    lt div  ngFor  let item of fakeArray 10   gt            lt  div gt    Typescript   fakeArray length  number   Array lt any gt      if  length  gt   0        return new Array length           Working Demo

User · Answer

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    gt  i          Then use the pipe in your template   lt p  ngFor  quot let i of 5   enumerate quot  gt     Index     i     lt  p gt   https   stackblitz com edit angular-ivy-pkwvyw file src app app component html

User · Answer

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    lt div class  month   ngFor  let item of items  gt       lt  div gt    In component code   this items   Array from  length  10    v  k    gt  k   1

[angular] Angular 2 - NgFor using numbers instead collections

Using custom Structural Directive with index:

Examples related to angular