How to create Nested Table in Angular?

Question

I am creating a dynamic table with the data array

let data = [{
  "criterialimitId": "3",
  "criteriaName": "Test",
  "criteriaId": "1",
  "criteria": "Max Wager",
  "type": "DAILY",
  "oprLimit": "2.5",
  "status": "1",
  "action": "SALE_HOLD",
  "plrLimitAllowed": "YES",
  "createdAt": "2020-09-22 13:30:02.0",
  "updatedAt": "2020-09-22 13:30:02.0",
  "attributes": [{
    "serviceId": "1",
    "serviceName": "Draw Game",
    "providers": [{
        "providerId": "1",
        "providerName": "IGT",
        "games": [{
            "gameId": "1",
            "gameName": "LOTTO"
          },
          {
            "gameId": "2",
            "gameName": "LOTTO2"
          }
        ]
      },
      {
        "providerId": "2",
        "providerName": "ABC",
        "games": [{
            "gameId": "2",
            "gameName": "AB1"
          },
          {
            "gameId": "23",
            "gameName": "AB2"
          }
        ]
      }
    ],
    "type": "DAILY",
    "status": "1",
    "createdAt": "2020-09-22 13:30:03.0",
    "updatedAt": "2020-09-22 13:30:03.0"
  }]
}]

console.log(data)

I want a table like this:

But I am getting the output like this: Should I use nested table? How to achieve this?

This is my code so far.

................. .................... .......................... ............................ I don't know what more to explain. @stackoverflow is not letting me post my question because "It looks like your post is mostly code; please add some more details." what more details are required? If anybody can assist, it would be helpful.

<table style="table-layout: fixed;" class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center align-middle">Service Name</th>
      <th class="text-center align-middle">Provider Name</th>
      <th class="text-center align-middle">Game Name</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let attribute of data.attributes">
      <tr>
        <td>{{attribute.serviceName}}</td>
        <td>
          <tr *ngFor="let provider of attribute.providers">
            <td>
              {{provider.providerName}}
            </td>
          </tr>
        </td>
        <td>
          <tr  *ngFor="let provider of attribute.providers">
            <td *ngFor="let game of provider.games"> 
              {{game.gameName}} <br>
            </td>
          </tr>
        </td>
      </tr>
    </ng-container>
  </tbody>
</table>

Answer 1

I solved it like this :

<table style="table-layout: fixed;" class="table table-bordered">
  <thead>
    <tr>
      <th class="text-center align-middle">{{'criteriaLimit.serviceName' | translate}}</th>
      <th class="text-center align-middle">{{'criteriaLimit.providerName' | translate}}</th>
      <th class="text-center align-middle">{{'criteriaLimit.gameName' | translate}}</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let attribute of data.attributes; let i = index;"> 
      <ng-container *ngFor="let provider of attribute.providers; let j = index">
        <ng-container *ngFor="let game of provider.games; let k = index">
          <tr>
            <td class="text-center align-middle" *ngIf="j==0 && k==0" [attr.rowspan]="calculateSpan(i)">{{attribute.serviceName}}</td>
            <td class="text-center align-middle" *ngIf="k==0" [attr.rowspan]="provider.games.length">{{provider.providerName}}</td>
            <td class="text-center align-middle" >{{game.gameName}}</td>
          </tr>
        </ng-container>
      </ng-container>
    </ng-container>
  </tbody>
</table>