I am a bit confused about how to get the key
and value
of an object in angular2 while using *ngFor
for iterating over the object. I know in angular 1.x there is a syntax like
ng-repeat="(key, value) in demo"
but I don't know how to do the same in angular2. I have tried something similar, without success:
<ul>
<li *ngFor='#key of demo'>{{key}}</li>
</ul>
demo = {
'key1': [{'key11':'value11'}, {'key12':'value12'}],
'key2': [{'key21':'value21'}, {'key22':'value22'}],
}
Here is a plnkr with my attempt: http://plnkr.co/edit/mIj619FncOpfdwrR0KeG?p=preview
How can I get key1
and key2
dynamically using *ngFor
? After searching extensively, I found the idea of using pipes but I don't know how to go about it.
Is there any inbuilt pipe for doing the same in angular2?
As in latest release of Angular (v6.1.0) , Angular Team has added new built in pipe for the same named as keyvalue
pipe to help you iterate through objects, maps, and arrays, in the common
module of angular package.
For example -
<div *ngFor="let item of testObject | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
check it out here for more useful information -
If you are using Angular v5 or below or you want to achieve using pipe follow this answer