access key and value of object using *ngFor
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>
Working Forked Example
check it out here for more useful information -
- https://github.com/angular/angular/blob/master/CHANGELOG.md#features-3
- https://github.com/angular/angular/commit/2b49bf7
If you are using Angular v5 or below or you want to achieve using pipe follow this answer
Have Object.keys
accessible in the template and use it in *ngFor
.
@Component({ selector: 'app-myview', template: `<div *ngFor="let key of objectKeys(items)">{{key + ' : ' + items[key]}}</div>`})export class MyComponent { objectKeys = Object.keys; items = { keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3' }; constructor(){}}
You could create a custom pipe to return the list of key for each element.Something like that:
import { PipeTransform, Pipe } from '@angular/core';@Pipe({name: 'keys'})export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (let key in value) { keys.push(key); } return keys; }}
and use it like that:
<tr *ngFor="let c of content"> <td *ngFor="let key of c | keys">{{key}}: {{c[key]}}</td></tr>
Edit
You could also return an entry containing both key and value:
@Pipe({name: 'keys'})export class KeysPipe implements PipeTransform { transform(value, args:string[]) : any { let keys = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; }}
and use it like that:
<span *ngFor="let entry of content | keys"> Key: {{entry.key}}, value: {{entry.value}}</span>