grouping with ngfor in angular

 

App.component.html:

<h1>Welcome to {{title}}</h1>

<h2>ngFor with groupby Tutorial</h2>

 

<table>

  <tr>

    <td>Book id</td>

    <td>Book name</td>

    <td>Book price India</td>&nbsp;

    <td>Book price USA</td>&nbsp;

    <td>Book price UK</td>

 

  </tr>

  <tr *ngFor="let item of booklist">

    <td>{{item.id}}</td>

    <td>{{item.name}}</td>

    <td>{{item.price.India}}</td>&nbsp;

    <td>{{item.price.USA}}</td>&nbsp;

    <td>{{item.price.UK}}</td>

  </tr>

</table>

App.component.ts

export class AppComponent {

     title='Shubho Tech'

     booklist:any[];

     constructor(){

       this.booklist=[

         {

           id:1,

           name:"Depth in C",

           price:{

             India:350,

             USA:351,

             UK:352

           }

         },

         {

          id:2,

          name:"Depth in C++",

          price:{

            India:450,

            USA:451,

            UK:452

          }

        },

        {

          id:3,

          name:"Java programming",

          price:{

            India:550,

            USA:551,

            UK:552

          }

        },

        {

          id:4,

          name:"Python programming",

          price:{

            India:650,

            USA:651,

            UK:652

          }

        }

       ];

     }

     

}