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, if json value is
Content:{
0:"Content1",
1:"Content2",
2:"Content3",
3:"Content4",
4:"Content5",
5:"Content6",
6:"Content7",
7:"Content8"
}
I not only want to display looping values of 'Content', but I also want to count them so that the result could be this below.
1 <- counting
Content1
2
Content2
3
Content3
4
Content4
5
Content5
6
Content6
7
Content7
8
Content8
childElementCount; will do the trick.
The syntax is *ngFor="let <value> of <collection>" . <value> is a variable name of your choosing, <collection> is a property on your component which holds a collection, usually an array but anything that can be iterated over in a for-of loop.
We use the NgFor directive to loop over an array of items and create multiple elements dynamically from a template element. The template element is the element the directive is attached to. We can nest muliple NgFor directives together.
ngForOf: NgIterable<T> : The value of the iterable expression. Useful when the expression is more complex then a property access, for example when using the async pipe ( userStreams | async ). index: number : The index of the current item in the iterable.
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>
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"> ...
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With