How to use ngFor to iterate over array of objects

Question

I am trying to use an ngFor directive iterating over a component attribute. my top level component is

export class OverviewComponent {
    public mips : Array<Object> =  [
    {id: '44',  label: 'MIPS 44',   description: 'Preoperative Beta Blocker'},
    {id: '76',  label: 'MIPS 76',   description: 'Central Line : Sterility'},
    {id: '404', label: 'MIPS 404',  description: 'Smoking Abstinence'},
    {id: '424', label: 'MIPS 424',  description: 'Perioperative Temperature Management'},
    {id: '430', label: 'MIPS 430',  description: 'PONV Adult'},
    {id: '463', label: 'MIPS 463',  description: 'PONV Pediatrics'},
];
...
}

in my top level component html, I have

<pie-chart class="mips-details"
           *ngFor="let mip of mips"
           summary="true"
           details={{mip}}>
</pie-chart>

My pie component has an input parameter such as

export class PieChartComponent implements OnInit{
    @Input()
    details : any;

What I am having problem with is how to set the details input. The way I have it setup, when I look at this.details, it shows '[object object]'

What am I doing wrong?

can you post the code for piechartcomponent html

Sajeetharan
– Sajeetharan

2018-07-26 00:55:36 +00:00
Commented Jul 26, 2018 at 0:55 — Sajeetharan
– Sajeetharan, Commented Jul 26, 2018 at 0:55

Sajeetharan · Accepted Answer · 2018-07-26 01:02:30Z

1

Whenever you are passing data to the child using @input, the binding should be as,

<pie-chart class="mips-details"
           *ngFor="let mip of mips"
           summary="true"
           [details]=mip>
</pie-chart>

answered Jul 26, 2018 at 1:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martin Parenteau · Accepted Answer · 2018-07-26 00:59:56Z

0

Use the following syntax to bind the details property:

[details]="mip"

answered Jul 26, 2018 at 0:59

Martin Parenteau

74k13 gold badges136 silver badges157 bronze badges

Collectives™ on Stack Overflow

How to use ngFor to iterate over array of objects

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related