Angular, ngFor, index

Question

How can I get the index i always counting the viewable output (1st line, 2ndline, ...) and not the data (data-line 1, data-line 4, ...)? So I would like to make it related to the ngIf instead of the order of data.

data: number []=[0,1,2,10,2,37,4,9,11];


<ul *ngFor="let d of data; let i = index;">
  <ng-container *ngIf="d%2==0">
    <li>Index={{i}} Data={{d}}</li>
  </ng-container>
</ul>

https://stackblitz.com/edit/angular-u7u4ru

I would like to have output

Index=0 Data=0
Index=1 Data=2
Index=2 Data=10
Index=3 Data=2
Index=4 Data=4

Rashmi Kumari · Accepted Answer · 2018-08-13 11:48:01Z

1

Filter your data in component

this.data.filter(x => {
      if (x % 2 == 0)
        return x;
    });

Working demo https://stackblitz.com/edit/angular-feae8f

answered Aug 13, 2018 at 11:48

Rashmi Kumari

5305 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user4676340 · Accepted Answer · 2018-08-13 11:27:58Z

0

Use a counter and a getter with a hook on the last lifecycle event : stackblitz

export class AppComponent  {
  name = 'Angular';
  data: number []=[0,1,2,10,2,37,4,9,11];
  count = 0;

  get counter() {
    return this.count++;
  }

  ngAfterContentChecked() {
    this.count = 0;
  }
}

answered Aug 13, 2018 at 11:27

user4676340

Comments

Mike Bovenlander · Accepted Answer · 2018-08-13 11:42:58Z

0

You should do this in the component itself not in the template.

Use the .map() operator to mod your data:

this.data = [0,1,2,10,2,37,4,9,11].map(x => { 
    if(x%2 == 0)
        return x;
})
// Remove all empty values.
.filter(n=>!isNaN(n));

stackblitz

edited Aug 13, 2018 at 11:42

answered Aug 13, 2018 at 11:31

Mike Bovenlander

5,4665 gold badges32 silver badges47 bronze badges

Collectives™ on Stack Overflow

Angular, ngFor, index

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related