0

How can I use custom index increment or decrement in ngFor? I want something like this:

`<div *ngFor="let item of items; let i = index">
   <span>
     {{items[i].name}}
  </span>
  <span>
     {{items[i+1].name}}
  </span>
  <!-- Then I want to increment index value like i++ -->
 </div>`

I mean how can I use custom for loop in angular's component html file?

Tohedul
  • 29
  • 1
  • 7
  • What do you mean by custom index? – Rebai Ahmed Feb 25 '22 at 10:52
  • In ngFor, index increase by 1 and return next item but I want to increase the index by 2 or any other value. So I can use i and i+1(1st and 2nd item) in the first iteration and increase the index value i=i+2 then in next iteration I will get the 3rd and 4th item because i=2 and so on – Tohedul Feb 25 '22 at 11:11
  • Below question might help you : https://stackoverflow.com/questions/54821472/how-to-increment-and-update-index-value-by-2-in-ngfor-while-using-a-fixed-struct#:~:text=Duplicate%20of%20ngFor%20with%20index,in%20a%202%20column%20structure. – Subham Kumar Feb 25 '22 at 11:42
  • Actually you want two items per ngFor iteration. here is the answer https://stackoverflow.com/a/36376185/7005503 – Kalim ul Haq Feb 25 '22 at 15:11

1 Answers1

0

I guess what you want to achieve is something like:

<div>
  <span *ngFor="let item of items">
    {{item.name}}
  </span>
</div>

This way you don't have to increment anything - angular ngFor directive does it for you

Update I'm not sure what do you want to achieve - maybe try to describe it in a better way. Maybe try this:

<div>
 <p *ngFor="let item of items; let i = index">
  <span>{{item.name}}</span>
  <span>{{items[i + 1].name}}</span>
 </p>
</div>
Panda-313
  • 820
  • 5
  • 5
  • I know that But this way one item iterates in each iteration but I want 2 items in each iteration like 1st and 2nd item in 1st iteration, 3rd and 4th in 2nd iteration.... – Tohedul Feb 25 '22 at 18:10