How to access previous/later elements within an ngFor loop?

Question

<div *ngFor="let item of list">
  <div *ngIf="item == previousItem"></div>
  <div *ngIf="item == firstItem"></div>
</div>

How can we make this type of thing work? That is, how can we access other items in the list either (1) in relation to the current index or (2) by absolute index?

EDIT: What if the list was instead an Observable?

<div *ngFor="let item of observable">
  <div *ngIf="item == previousItem"></div>
  <div *ngIf="item == firstItem"></div>
</div>

eko · Answer 1 · 2017-05-18T21:09:01.783

42

You can take advantage of the index property of *ngFor

<div *ngFor="let item of list; let i = index;">
  <div *ngIf="item == list[i-1]"></div>
  <div *ngIf="item == list[0]"></div>
</div>

You can find more info on *ngFor local variables in the docs: https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html

edited May 18 '17 at 21:09

answered May 18 '17 at 20:55

eko

39,722
10
72
98

6

`list[0]` can be also replaced by `first` where `first` you can define in template like this: `
` :)
– developer033 May 18 '17 at 21:06
@developer033 ah thanks for the reminder :-) I'll put the link for the docs – eko May 18 '17 at 21:08

score 26 · Answer 2 · answered Apr 19 '18 at 15:51

Based on the accepted answer, I found this useful to know. If you are using *ngFor with an async call you can do the following:

<div *ngFor="let item of list | async as items; let i = index;">
  <div *ngIf="items.length > 0 && item === items[i-1]"></div>
  <div *ngIf="item === items[0]"></div>
</div>

How to access previous/later elements within an ngFor loop?

2 Answers2

Linked