access key and value of object using *ngFor

Question

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?

currently there is not support key, value pair kind of syntax in angular2 ngFor, you should look at this answer — Pankaj Parkar
@PankajParkar yeah already read this answer. any alternate for now ?
@Pradeep I don’t think of any other way for this now, you should go for creating own Pipe for this.. — Pankaj Parkar
@Pradeep answer which I gave you for reference, has that implementation. they should work.. — Pankaj Parkar

Top-Master · Accepted Answer · 2018-07-24T06:28:43

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>

To keep original order, use keyvalue:onCompare,
and in component define callback:

// ...
import {KeyValue} from '@angular/common';

@Component(/* ... */)
export class MyComponent {
  private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
    return -1;
  }
}

Working Forked Example

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

access key and value of object using ngfor

lol I had to do an ng6 update just to access this pipe – great stuff – thx — danday74
You can keep the original key order using a custom comparator: *ngFor="let item of testObject | keyvalue:keepOriginalOrder" and in your class define: public keepOriginalOrder = (a, b) => a.key — mike-shtil
public keepOriginalOrder = (a, b) => a.key thx a lot for this — Kumaresan Perumal
Unbelievable this wasn’t out there since the first version — Carlos Pinzón

tomtastico · Accepted Answer · 2017-03-15T15:11:37

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(){}
}

@PardeepJain it’s an ES5 method developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — tomtastico
@tomtastico How would you display this for a 3D array? For example {“1”: {“1.1”: [“1.1.1″,”1.1.2”]}}. And then nesting 3 ngFor’s — Frank
@Frank you just said it yourself. Nest the *ngFors. First two using objectKeys, innermost no need (as it’s just an array). — tomtastico
Awesome. Setting objectKeys = Object.keys is simplest method I’ve seen to be able to check the length of an object from the HTML. — JAC

Muhammad Shaharyar · Accepted Answer · 2016-02-21T12:22:09

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>

note the missing closing bracket in keys.push({key: key, value: value[key]); — golyo
I actually discourage anyone from using pipes to create collections inside *ngFor expression. It creates huge performance bottleneck because it needs to generate the collection every time the change detector checks for changes. — martin
Thanks for the solution…the problem is that whenever the object changes, the pipe doesn’t update. If I add pure:false to the pipe, it becomes very inefficient. Do you have a solution to update the pipe manually whenever I change the object (remove item)? — ncohen
The answer is a little bit outdated. The line *ngFor=”#entry of content | keys” doesn’t work properly and the for … in loop better to change to “for (const key of Object.keys(value)) “ — Experimenter
@RachChen Not in templates: common: NgFor has been removed as it was deprecated since v4. Use NgForOf instead. This does not impact the use of*ngFor in your templates. (jaxenter.com/road-to-angular-5-133253.html) — mwld

yurzui · Accepted Answer · 2017-07-21T09:21:59

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);
    }
  }
}

Gerard Carbó · Accepted Answer · 2018-08-18T14:17:39

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).

Already shared the same answer above stackoverflow.com/a/51491848/5043867
@PardeepJain please let other people share as well 🙂 ! second part of answer is what I needed — minigeek
@minigeek different solutions are always welcome mate. But when I have posted the comment this second part you referring was missing and only first part is there which is duplucate of accepted answer. you can check changelog of answer history.
@PardeepJain. Yes your answer and that guy’s comment only helped me fix thing. I understand ur point how plagiarism feels :p — minigeek

Community · Accepted Answer · 2016-02-21T18:28:16

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>

This needs to be updated: Here’s the warning I get “#” inside of expressions is deprecated. Use “let” instead! (” </li>–> <ul *ngIf=”demo”> <li [ERROR ->]*ngFor=’#key of demo| keys’> Key: {{key.key}}, value: {{key.value}} </li> “): [email protected]:6 — user6123723
Not sure if this is new, but to cite from the docs: > We must include our pipe in the declarations array of the AppModule. — Akzidenzgrotesk

Stephen Paul · Accepted Answer · 2016-10-06T12:30:05

@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...
}

and how is that better than just Object.keys(...) inside the *ngFor? — Simon_Weaver
Because it will throw: TypeError: Cannot read property 'keys' of undefined. It doesn’t seem to be supported in the template. — Stephen Paul
This works very well as a solution and avoids the performance issues pointed out above. stackoverflow.com/questions/35534959/… — J. Adam Connor
hello, can this b used not in the template option, but in the template’s actual html code? thanks — Scaramouche

Jeremy Moritz · Accepted Answer · 2017-02-06T21:51:05

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 = _;

sorry but no need to use extra library like Lodash for such things. anyways new methods are always welcome 🙂

Shamitha Silva · Accepted Answer · 2020-06-23T12:21:51

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;

Would be great if you add working example as well, stackblitz may be

Winnipass · Accepted Answer · 2016-08-27T11:23:44

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;
  }
}

Adonias Vasquez · Accepted Answer · 2019-04-30T15:21:30

Use index:

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

Usage:

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

Adonias Vasquez

3

That is something new to me, Better If you could add example along with your answer 🙂 Also can you point me to any documentation for the same?
–
What is the type of Objects ? Array or Map? Please make it clear. Thanks in advance
– Basil
In this example, the “key” is the index. This have nothing to do with the question and wont work to access the real key
– Raphaël Balet

cjohansson · Accepted Answer · 2017-05-18T10:48:55

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.

may i know what is the difference betwee your answer and other answer’s (using pipe only) provided above ? it seems same as above
Sure 1. The examples above uses *ngFor=”#entry” instead of *ngFor=”let entry of” and my compiler didn’t accept the #entry syntax, the reference doesn’t use # either. “let entry of (myData | keys)” seems to be a better solution. 2. My compiler didn’t validate the example Pipe Class either because it was missing explicit data types so I added that. 3. The examples above doesn’t show how to integrate the Pipe into a project which my answer does, you need to import it into the main module. — cjohansson
haha yes offcourese, because when answer was given at that time syntax including # etc. btw your answer is also correct no doubt

Arefe · Accepted Answer · 2021-08-22T03:16:53

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>

RichieRock · Accepted Answer · 2017-05-22T08:54:45

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 🙂

good alternate, but thing is why to use external library for simple peace of code if we can do this using simple piece of code like pipe
Umm… but it is a pipe? It’s just one line in your package.json and another two lines in your module when you import the library. On the other hand, a custom pipe needs a separate file with some 10-20 lines of code and also the import lines in your module. We find using ngx-pipes very easy in our projects. Why should we reinvent the wheel? 🙂 — RichieRock
yeah no doubt, actually its an opinion based, you can choose either between these two, no one is wrong way.
Don’t forget, if you write a custom pipe, you must test that custom pipe as well. So that’s 10-20 lines of pipe code, and then probably 20-40 lines of test code to test the pipe. — danwellman

Sudheer KB · Accepted Answer · 2016-09-16T12:07:48

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

Mohammad Reza Mrg · Accepted Answer · 2018-07-16T15:49:39

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>

This is not a appropriate method, this can be easily done by anyone.

Ciarán Bruen · Accepted Answer · 2017-03-27T08:56:29

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)

kevinius · Accepted Answer · 2017-03-01T20:14:56

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;

    });

Rizwan · Accepted Answer · 2019-02-08T11:16:08

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

myObj['key']

Emmanuel Iyen-Mediatrees · Accepted Answer · 2021-08-20T13:36:13

Create your array like this

tags = [
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        },
        {
            name : 'Aliko Dogara',
            amount   : '60,000',
            purpose: 'Office repairs'
        }
    ];

works all the time

20 Answers
20

Working Forked Example

Update

Previous version

update to RC

Convert hex string to integer in Python

Pie charts in R leaflet, turn count into sum and ...

Why am I getting "Object is possibly 'undefined'" in this ...

Express JS How to push object to an array of ...

How to initialize standalone Radio Button Group component checked property ...

Sign Up

Sign In

access key and value of object using *ngFor

20 Answers 20

Update

Previous version

update to RC

20 Answers
20