Breaking News: Grepper is joining You.com. Read the official announcement!

Iterate object using ngFor in angular

Add Answer

Envious Elk answered on December 14, 2020 Popularity 10/10 Helpfulness 6/10

answer Iterate object using ngFor in angular

related iterate object ngfor

related angular ngfor on object

related angular how to iterate object

Iterate object using ngFor in angular

Comment

@Component({
  selector: 'keyvalue-pipe',
  template: `<span>
    <p>Object</p>
    <div *ngFor="let item of object | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
    <p>Map</p>
    <div *ngFor="let item of map | keyvalue">
      {{item.key}}:{{item.value}}
    </div>
  </span>`
})
export class KeyValuePipeComponent {
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);
}

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: stackoverflow.com

Tags: angular iterate javascript ngfor object using

Link to this answer
Share Copy Link

Contributed on Dec 11 2021

Envious Elk

0 Answers Avg Quality 2/10

Closely Related Answers

iterate object ngfor

Comment

// In your ts file
Object = Object;

// then in the template:

<div *ngFor="let key of Object.keys(objs)">
   my key: {{key}}
   my object {{objs[key] | json}} <!-- hier I could use ngFor again with Object.keys(objs[key]) -->
</div>

Popularity 10/10 Helpfulness 7/10 Language typescript

Source: Grepper

Tags: iterate

Link to this answer
Share Copy Link

Contributed on Dec 14 2020

Mobile Star

0 Answers Avg Quality 2/10

angular ngfor on object

Comment

Using `keyvalue` pipe

<div *ngFor="let item of {'key1': 1, 'key2': 2} | keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

Popularity 8/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: angular-ngfor an

Link to this answer
Share Copy Link

Contributed on Mar 23 2023

Abobakr

0 Answers Avg Quality 2/10

angular how to iterate object

Comment

keys() : Array<string> {
    return Object.keys(this.myDict);
  }

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: angular

Link to this answer
Share Copy Link

Contributed on Dec 22 2020

Stupid Sable

0 Answers Avg Quality 2/10

Iterate object using ngFor in angular

Contents

More Related Answers

Iterate object using ngFor in angular

Closely Related Answers

iterate object ngfor

angular ngfor on object

angular how to iterate object

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.