Render Nested objects value in html using Angular ngFor directive

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