Angular 2 How to write a for loop not a foreach loop

Question

Using Angular 2  I want to duplicate a line in a template multiple times  Iterating over an object is easy   ngFor  quot let object of objects quot   However  I want to run a simple for loop  not a foreach loop  Something like  pseudo-code    for i   0  i  lt  5  i       lt li gt Something lt  li gt   endfor   How would I do this

User · Answer

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>

Plunkr here

User · Answer

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     lt ul gt     lt li  ngFor  let a of fakeArray  let index   index  gt Something    index    lt  li gt   lt  ul gt    The index properties give you the iteration number   Live version

User · Answer

You can do both in one if you use index   lt div  ngFor  let item of items  let myIndex   index gt      myIndex    lt  div gt    With this you can get the best of both worlds

User · Answer

If you want to use the object of ith term and input it to another component in each iteration then    lt table class  table table-striped table-hover  gt     lt tr gt       lt th gt  Blogs  lt  th gt     lt  tr gt     lt tr  ngFor  let blogEl of blogs  gt       lt app-blog-item  blog   blogEl  gt   lt  app-blog-item gt     lt  tr gt   lt  table gt

User · Answer

queNumMin   23     queNumMax  26     result   0  for  let index   this queNumMin  index  lt   this queNumMax  index               this result   index          console log  this result            Range min and max number

User · Answer

Depending on the length of the wanted loop  maybe even a more  template-driven  solution    lt ul gt     lt li  ngFor  let index of  0 1 2 3 4 5   gt         index       lt  li gt   lt  ul gt

User · Answer

You could dynamically generate an array of however time you wanted to render  lt li gt Something lt  li gt   and then do ngFor over that collection  Also you could take use of index of current element too   Markup   lt ul gt      lt li  ngFor  let item of createRange 5   let currentElementIndex index 1  gt          currentElementIndex   Something     lt  li gt   lt  ul gt    Code  createRange number     var items  number           for var i   1  i  lt   number  i          items push i         return items      Demo Here  Under the hood angular de-sugared this  ngFor syntax to ng-template version    lt ul gt       lt ng-template ngFor let-item  ngForOf   createRange 5   let-currentElementIndex   index   1    ngForTrackBy   trackByFn  gt          currentElementIndex   Something      lt  ng-template gt   lt  ul gt

User · Answer

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   lt div  ngFor  let day of dayOfMonth  gt   day   lt  div gt

User · Answer

You can simply do  -      lt li gt Something lt  li gt   repeat 5

[angular] Angular 2: How to write a for loop, not a foreach loop

Examples related to angular

Examples related to angular2-template