Angular2 ngFor how to count the number of looping values?
There is a local variable named count
.
<li *ngFor="let user of users; count as c">
{{c}} is number of iterable thing
</li>
Demo
<ul>
<li *ngFor="let item of items; let i = index">
{{i}}. {{item}}
</li>
</ul>
{{items ? items.length : ''}}
You could just print the length of the items array.
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:
<li *ngFor="let item of content; let i = index">
{{i+1}} {{item}}
</li>
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
<li *ngFor="let key of objs | keys; let i = index"> ...
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:
<li *ngFor="let item of data | keyvalue; let i = index">
{{i+1}}. {{item.key}} - {{item.value}}
</li>