Angular2 ngFor how to count the number of looping values?

Question

I am using ngFor to loop 8 json objects and I want not only to loop the values but also I want to count the number of looping values and display the number.

For example,

Answer 1

Iterating over array

Regarding the docs: https://angular.io/guide/structural-directives#inside-ngfor and https://angular.io/api/common/NgForOf

Say you have an iterable:

let content = [
  "Content1",
  "Content2",
  "Content3",
  "Content4",
  "Content5",
  "Content6",
  "Content7",
  "Content8"
]

Then you can iterate and count with:

    {{i+1}} {{item}}

Iterating over object properties

If you want to iterate over an object rather than an array of objects, check How to iterate object keys using *ngFor

For the record, you need a custom pipe:

@Pipe({ name: 'keys',  pure: false })
export class KeysPipe implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

So that would be

 ...

Update

From Angular 6.1+, you can use the native KeyValuePipe.

https://blog.angular.io/angular-v6-1-now-available-typescript-2-9-scroll-positioning-and-more-9f1c03007bb6#ff4b

https://angular.io/api/common/KeyValuePipe

For the record:

  {{i+1}}. {{item.key}} - {{item.value}}