How to iterate object keys using *ngFor?

Question

I\'ve been digging around, and found out that I can use the following to use *ngFor over an object:

 
...         


        
      

Answer 1

Just return the keys from the pipe instead of the values and then use the keys to access the values:

(let instead of # in the beta.17)

@Pipe({ name: 'ObjNgFor',  pure: false })
export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

@Component({
    selector: 'my-app',
    pipes: [ObjNgFor],
    template: `
    
Hello
 
{{key}}:{{objs[key].description}}
    `,
})
export class AppComponent {
  objs = {
    "propertyA":{
      "description":"this is the propertyA",
      "default":"sth"
    },
    "propertyB":{
      "description":"this is the propertyB",
      "default":"sth"
    }
  };
}

Plunker example

See also Select based on enum in Angular2