CODEWITHSUNDEEP
javascriptangulartypescript
Felix Christo
Felix Christo

Reputation: 229

Bind pair of array element

I have 8 values in an Array. I am trying to bind two values in a row. Next two in next row and vice versa. But I couldn't do that in *ngFor. Please help me out.

TS

times = ["7.00 AM","8.00 AM","10.00 AM","11.00 AM","1.00 PM","2.00 PM","4.00 PM","5.00 PM"]

HTML

<div *ngFor="let time of times">
<button class="btn btn-outline">{{time}}</button>
</div>

But, displays one in each.

Expected output

O/P

Upvotes: 0

Views: 57

Answers (1)

Pushkin
Pushkin

Reputation: 3604

Use index to get the next value in the array

<div *ngFor="let time of times; let i = index;">
  <button
    *ngIf="times[i + 1]"
    class="btn btn-outline"
  >{{time}} - {{times[i + 1]}}</button>
</div>

Upvotes: 2

Related Questions