Render Nested objects value in html using Angular ngFor directive

Question

I have an Object with nested object. I am trying to display in html using ngFor directive of Angular. But I got the result as multiple time. Below my object

 productlists = [
    {
      productname: 'orange', price:
        [{ small: 20 }, { medium: 30 }, { large: 40 }], gst: 12
    },
    {
      productname: 'lemon', price:
        [{ small: 40 }, { medium: 80 }, { large: 102 }], gst: 20
    },
    {
      productname: 'apple', price:
        [{ small: 40 }, { medium: 80 }, { large: 102 }], gst: 20
    }

];

The html code is

<div style="margin-left: 20rem;">
<div *ngFor="let product of productlists" >

    <p style="color: blue;">Product Name {{product.productname}}</p>

    <div *ngFor="let productprice of product.price">
        Product Price
        <p>Small: {{productprice.small}}</p>
        <p>Medium: {{productprice.medium}}</p>
        <p>Large: {{productprice.large}}</p>
    </div>
    <p>Product GST {{product.gst}}</p>

</div>
</div>

The result i got is

Please help me display correctly

Answer 1

We can use keyvalue pipe to split the object's key and value so that we can access them individually.

We use titlecase pipe so that the key extracted from the object is displayed with the first letter capitalized.

We use *ngIf's as syntax to store the value from the keyvalue pipe and use ng-container so that no extra elements are added to the HTML.

<div style="margin-left: 20px;">
  <div *ngFor="let product of productlists" >
      <p style="color: blue;">Product Name {{product.productname}}</p>
      Product Price
      <div *ngFor="let productprice of product.price">
        <ng-container *ngIf="productprice | keyvalue as productPriceObj">
          <p>{{productPriceObj[0].key | titlecase}}: {{productPriceObj[0].value}}</p>
        </ng-container>
      </div>
      <p>Product GST {{product.gst}}</p>
  </div>
</div>

Full Code:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-root',
  imports: [CommonModule],
  template: `
    <div style="margin-left: 20px;">
      <div *ngFor="let product of productlists" >
          <p style="color: blue;">Product Name {{product.productname}}</p>
          Product Price
          <div *ngFor="let productprice of product.price">
            <ng-container *ngIf="productprice | keyvalue as productPriceObj">
              <p>{{productPriceObj[0].key | titlecase}}: {{productPriceObj[0].value}}</p>
            </ng-container>
          </div>
          <p>Product GST {{product.gst}}</p>
      </div>
    </div>
  `,
})
export class App {
  productlists = [
    {
      productname: 'orange',
      price: [{ small: 20 }, { medium: 30 }, { large: 40 }],
      gst: 12,
    },
    {
      productname: 'lemon',
      price: [{ small: 40 }, { medium: 80 }, { large: 102 }],
      gst: 20,
    },
    {
      productname: 'apple',
      price: [{ small: 40 }, { medium: 80 }, { large: 102 }],
      gst: 20,
    },
  ];
}

bootstrapApplication(App);

Stackblitz Demo