How to iterate object keys using *ngFor?
Or instead of creating a pipe and passing an object to *ngFor, just pass Object.keys(MyObject)
to *ngFor. It returns the same as the pipe, but without the hassle.
On TypeScript file:
let list = Object.keys(MyObject); // good old javascript on the rescue
On template (html):
*ngFor="let item of list"
Update
In 6.1.0-beta.1 KeyValuePipe
was introduced https://github.com/angular/angular/pull/24319
<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
{{ item.key }} - {{ item.value }}
</div>
Plunker Example
Previous version
You could try something like this
export class ObjNgFor implements PipeTransform {
transform(value: any, args: any[] = null): any {
return Object.keys(value).map(key => Object.assign({ key }, value[key]));
}
}
And then on your template
<div *ngFor="let obj of objs | ObjNgFor">
{{obj.key}} - {{obj.description}}
</div>
Plunker