Make grouped rows in table

Question

I have a class with 3 objects in a class that I push in an array and I have to display them grouped in an array like below.

Each line has to be an object. The problem is that I can't find a way to display them like this. I don't use angular material.

Product	Price	Tax
P1	2	1
P2	1	2
P3	3	3
-----	-----	-----
P1	15	4
P2	10	5
P3	20	6

the content of the array:

[
    {
    store: {product_from_store:P1, price:2, tax:1},
    client: {product_from_client:P2, price:1, tax:2},
    sub: {product_from_sub:P3, price:3, tax:3}
    },
 {
    store: {product_from_store:P1, price:15, tax:4},
    client: {product_from_client:P2, price:10, tax:5},
    sub: {product_from_sub:P3, price:20, tax:6}
    }
]

I build this array with different objects so I can't make a simple *ngFor to display them

I think something like this can work but I don't get the expected result.

   <tr *ngFor="let product of groupedTable; let i = index">
        <td>
          <ng-container
            *ngTemplateOutlet="itemTemplate;">
          </ng-container>
        </td>
      </tr>
      <ng-template #itemTemplate>
       //row content ?
    </ng-template>

Answer 1

You can use ng-container to loop over the groups, and then loop over each record in the tr like this maybe?

<ng-container *ngFor="let group of groups">
    <tr *ngFor="let record of group">
        <td *ngFor="let column of record | keyvalue">
            {{ column.key }} {{ column.value }}
        </td>
    </tr>
</ng-container>