how to access objects property name in angular template?

Question

I want to bind a nested objects property name using angular interpolation

 <ng-container ngFor="let item of saleDetailsAggegater.productMap | keyvalue">
                            <tr *ngFor="let qtyMap of item.value | keyvalue">
                              <td>{{ item.key }}</td>
                              <td>{{qtyMap.value}}</td>
                              <td>{{Object.keys(qtyMap)[0]}}</td>
                            </tr>
                        </ng-container>

my saledetailsAggegater object is as follows

{"productMap":{"55478":{"priceQuantityMap":{"200.00":10}}},"taxMap":{},"paymentMap":{"1":970},"total":970}

but this line is not working as expected

<td>{{Object.keys(qtyMap)[0]}}</td>

how can i achieve this?

What is not working as expected? What is the expected outcome? I don't think you can use native javascript functions (like Object.keys) in your template — devqon
– devqon, Commented Oct 9, 2020 at 6:56

devqon · Accepted Answer · 2020-10-09 07:04:02Z

4

I don't think you can use native javascript functions in your template (angular won't parse them). You can however define the function on your component, and then use that in your template:

@Component({
  template: '<td>{{objectKeys(myObj)[0]}}</td>'
})
export class MyComponent {
  objectKeys = Object.keys;

  myObj = { displayThisKey: 'some-value' };
}

edited Oct 9, 2020 at 7:04

answered Oct 9, 2020 at 6:58

devqon

14k2 gold badges32 silver badges46 bronze badges

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

Comments

Elmehdi · Accepted Answer · 2020-10-09 07:14:22Z

first you have a typo in your first ngFor, you forgot to put the *.
and you can achieve what you want by doing the following:

<ng-container *ngFor="let item of saleDetailsAggegater.productMap | keyvalue">
    <tr *ngFor="let qtyMap of item.value | keyvalue">
        <td>{{ item.key }}</td>
        <td>{{qtyMap.value | json}}</td>
        <td>{{qtyMap.key | json}}</td>
        <td>{{(qtyMap.value | keyvalue | json)}}</td>
    <td *ngFor="let qty of (qtyMap.value | keyvalue);">
      {{qty.key}}
    </td>
    </tr>
</ng-container>

I deleted {{Object.keys(qtyMap)[0]}} and added a json pipe just to make sure the object has the values you wanted. I also added multiple possibilities for you to choose from.
and here is a live demo: link

Collectives™ on Stack Overflow

how to access objects property name in angular template?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related