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

angular ngfor on object

Add Answer

Abobakr answered on December 14, 2020 Popularity 8/10 Helpfulness 5/10

answer angular ngfor on object

related iterate object ngfor

related Iterate object using ngFor in angular

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 javascript object

Link to this answer
Share Copy Link

Contributed on Mar 23 2023

Abobakr

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

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

Link to this answer
Share Copy Link

Contributed on Dec 11 2021

Envious Elk

0 Answers Avg Quality 2/10

angular ngfor on object

Contents

More Related Answers

angular ngfor on object

Closely Related Answers

iterate object ngfor

Iterate object using ngFor in angular

Grepper

Documentation

Social

Legal

Contact

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