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> 

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

Another approach is to create NgForIn directive that will be used like:

<div *ngFor="let key in obj"> <b>{{ key }}</b>: {{ obj[key] }} </div> 

Plunker Example

ngforin.directive.ts

@Directive({ selector: '[ngFor][ngForIn]' }) export class NgForIn<T> extends NgForOf<T> implements OnChanges { @Input() ngForIn: any; ngOnChanges(changes: NgForInChanges): void { if (changes.ngForIn) { this.ngForOf = Object.keys(this.ngForIn) as Array<any>; const change = changes.ngForIn; const currentValue = Object.keys(change.currentValue); const previousValue = change.previousValue ? Object.keys(change.previousValue) : undefined; changes.ngForOf = new SimpleChange(previousValue, currentValue, change.firstChange); super.ngOnChanges(changes); } } } 

From Angular 6.1 you can use the keyvalue pipe:

<div *ngFor="let item of testObject | keyvalue"> Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b> </div> 

But it has the inconvenient that sorts the resulting list by the key value. If you need something neutral:

@Pipe({ name: 'keyValueUnsorted', pure: false }) export class KeyValuePipe implements PipeTransform { transform(input: any): any { let keys = []; for (let key in input) { if (input.hasOwnProperty(key)) { keys.push({ key: key, value: input[key]}); } } return keys; } } 

Don't forget to specify the pure:false pipe attribute. In this case, the pipe is invoked on each change-detection cycle, even if the input reference has not changed (so is the case when you add properties to an object).

Elaboration of @Thierry's answer with example.

There is no inbuilt pipe or method to get key and value from the *ngFor loop. so we have to create custom pipe for the same. as thierry said here is the answer with code.

** The pipe class implements the PipeTransform interface's transform method that takes an input value and an optional array of parameter strings and returns the transformed value.

** The transform method is essential to a pipe. The PipeTransform interface defines that method and guides both tooling and the compiler. It is optional; Angular looks for and executes the transform method regardless. for more info regards pipe refer here

import {Component, Pipe, PipeTransform} from 'angular2/core'; import {CORE_DIRECTIVES, NgClass, FORM_DIRECTIVES, Control, ControlGroup, FormBuilder, Validators} from 'angular2/common'; @Component({ selector: 'my-app', templateUrl: 'mytemplate.html', directives: [CORE_DIRECTIVES, FORM_DIRECTIVES], pipes: [KeysPipe] }) export class AppComponent { demo = { 'key1': 'ANGULAR 2', 'key2': 'Pardeep', 'key3': 'Jain', } } @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 HTML part is:

<ul> <li *ngFor='#key of demo | keys'> Key: {{key.key}}, value: {{key.value}} </li> </ul> 

Working Plnkr http://plnkr.co/edit/50LlK0k6OnMnkc2kNHM2?p=preview

update to RC

as suggested by user6123723(thanks) in comment here is update.

<ul> <li *ngFor='let key of demo | keys'> Key: {{key.key}}, value: {{key.value}} </li> </ul> 

@Marton had an important objection to the accepted answer on the grounds that the pipe creates a new collection on each change detection. I would instead create an HtmlService which provides a range of utility functions which the view can use as follows:

@Component({ selector: 'app-myview', template: `<div *ngFor="let i of html.keys(items)">{{i + ' : ' + items[i]}}</div>` }) export class MyComponent { items = {keyOne: 'value 1', keyTwo: 'value 2', keyThree: 'value 3'}; constructor(private html: HtmlService){} } @Injectable() export class HtmlService { keys(object: {}) { return Object.keys(object); } // ... other useful methods not available inside html, like isObject(), isArray(), findInArray(), and others... } 

If you're already using Lodash, you can do this simple approach which includes both key and value:

<ul> <li *ngFor='let key of _.keys(demo)'>{{key}}: {{demo[key]}}</li> </ul> 

In the typescript file, include:

import * as _ from 'lodash'; 

and in the exported component, include:

_: any = _; 

Thought of adding an answer for Angular 8:

For looping you can do:

<ng-container *ngFor="let item of BATCH_FILE_HEADERS | keyvalue: keepOriginalOrder"> <th nxHeaderCell>{{'upload.bulk.headings.'+item.key |translate}}</th> </ng-container> 

Also if you need the above array to keep the original order then declare this inside your class:

public keepOriginalOrder = (a, b) => a.key; 

Thanks for the pipe but i had to make some changes before i could use it in angular 2 RC5. Changed the Pipe import line and also added type of any to the keys array initialization.

 import {Pipe, PipeTransform} from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value) { let keys:any = []; for (let key in value) { keys.push( {key: key, value: value[key]} ); } return keys; } } 

You can use the keyvalue pipe as the sample code is provided:

 <div style="flex-direction: column"> <app-cart-item class="cart-item" *ngFor="let keyValuePair of this.allProductRecords | keyvalue" [productRecord]="keyValuePair.value" (removeProduct)="removeProductFromCart(keyValuePair.key)" ></app-cart-item> <br /> <p style="font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: bolder"> Total ${{ getTotalPurchaseAmount() }} </p> </div> 

None of the answers here worked for me out of the box, here is what worked for me:

Create pipes/keys.ts with contents:

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({name: 'keys'}) export class KeysPipe implements PipeTransform { transform(value:any, args:string[]): any { let keys:any[] = []; for (let key in value) { keys.push({key: key, value: value[key]}); } return keys; } } 

Add to app.module.ts (Your main module):

import { KeysPipe } from './pipes/keys'; 

and then add to your module declarations array something like this:

@NgModule({ declarations: [ KeysPipe ] }) export class AppModule {} 

Then in your view template you can use something like this:

<option *ngFor="let entry of (myData | keys)" value="{{ entry.key }}">{{ entry.value }}</option> 

Here is a good reference I found if you want to read more.

Use index:

<div *ngFor="let value of Objects; index as key"> 

Usage:

{{key}} -> {{value}} 

There's a real nice library that does this among other nice pipes. It's called ngx-pipes.

For example, keys pipe returns keys for an object, and values pipe returns values for an object:

keys pipe

<div *ngFor="let key of {foo: 1, bar: 2} | keys">{{key}}</div> <!-- Output: 'foo' and 'bar --> 

values pipe

<div *ngFor="let value of {foo: 1, bar: 2} | values">{{value}}</div> <!-- Output: 1 and 2 --> 

No need to create your own custom pipe :)

Here is the simple solution

You can use typescript iterators for this

import {Component} from 'angular2/core'; declare var Symbol; @Component({ selector: 'my-app', template:`<div> <h4>Iterating an Object using Typescript Symbol</h4><br> Object is : <p>{{obj | json}}</p> </div> ============================<br> Iterated object params are: <div *ngFor="#o of obj"> {{o}} </div> ` }) export class AppComponent { public obj: any = { "type1": ["A1", "A2", "A3","A4"], "type2": ["B1"], "type3": ["C1"], "type4": ["D1","D2"] }; constructor() { this.obj[Symbol.iterator] = () => { let i =0; return { next: () => { i++; return { done: i > 4?true:false, value: this.obj['type'+i] } } } }; } } 

http://plnkr.co/edit/GpmX8g?p=info

change demo type to array or iterate over your object and push to another array

public details =[]; Object.keys(demo).forEach(key => { this.details.push({"key":key,"value":demo[key]); }); 

and from html:

<div *ngFor="obj of details"> <p>{{obj.key}}</p> <p>{{obj.value}}</p> <p></p> </div> 

ECMA 2017+ solution

Following the idea of some other answers, you can create a Pipe to create an array of [key, value] from your object, but in a much simpler way, following the new method Object.entries introduced in the ECMA 2017.

Pipe

import { PipeTransform, Pipe } from '@angular/core'; /** * Transform a literal object into array */ @Pipe({ name: 'forObject', pure: true, }) export class ForObjectPipe implements PipeTransform { transform(object, args?: any): any { return Object.entries(object); } } 

Module

In your module, you declare and provide it

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ForObjectPipe } from './for-object.pipe'; import { MyPageRoutingModule } from './my-routing.module'; import { MyPage } from './my.page'; @NgModule({ imports: [ CommonModule, MyPageRoutingModule, ], declarations: [ MyPage, ForObjectPipe, ], providers: [ ForObjectPipe, ] }) export class MyPageModule {} 

Then you can use in your component typescript code or HTML.

Using in component

// ... import { ForObjectPipe } from './for-object.pipe'; @Component({ selector: 'app-my', templateUrl: './my.page.html', styleUrls: ['./my.page.scss'], }) export class MyComponent { obj: { [key: any]: any } = { 1: 'hello', 2: 'world', }; constructor(private forObjectPipe: ForObjectPipe) { } foo() { const myArray = this.forObjectPipe.transform(this.obj); // same as const myArray = Object.entries(this.obj); } } 

Using in component view

<h1>Object:</h1> <div *ngFor="let pair of obj | forObject"> KEY: {{ pair[0] }} - VALUE: {{ pair[1] }} </div> 

Output:

Object: KEY: 1 - VALUE: hello KEY: 2 - VALUE: world 

Live Demo: https://stackblitz.com/edit/angular-qapapx?file=src/app/hello.component.ts

I think Object.keys is the best solution to this problem. For anyone that comes across this answer and is trying to find out why Object.keys is giving them ['0', '1'] instead of ['key1', 'key2'], a cautionary tale - beware the difference between "of" and "in":

I was already using Object.keys, something similar to this:

interface demo { key: string; value: string; } createDemo(mydemo: any): Array<demo> { const tempdemo: Array<demo> = []; // Caution: use "of" and not "in" for (const key of Object.keys(mydemo)) { tempdemo.push( { key: key, value: mydemo[key]} ); } return tempdemo; } 

However, instead of

for (const key OF Object.keys(mydemo)) { 

I had inadvertently wrote

for (const key IN Object.keys(mydemo)) { 

which "worked" perfectly fine without any error and returned

[{key: '0', value: undefined}, {key: '1', value: undefined}] 

That cost me about 2 hours googling and cursing..

(slaps forehead)

You have to do it like this for now, i know not very efficient as you don't want to convert the object you receive from firebase.

 this.af.database.list('/data/' + this.base64Email).subscribe(years => { years.forEach(year => { var localYears = []; Object.keys(year).forEach(month => { localYears.push(year[month]) }); year.months = localYears; }) this.years = years; }); 

you can get dynamic object's key with by trying this

myObj['key']