<table class="mat-elevation-z8">
   <ng-container *ngFor="let detail of lisDetails">
      <tr>
         <th colspan="2" class="category-header">
            {{ detail.category || 'No Category' }}
         </th>
      </tr>
      <ng-container *ngFor="let field of detail.fields">
         <tr>
            <td class="field-name">
         <tr>{{ field.name }}</tr>
         </td>
         <td class="field-value">
         <tr>{{ field.value }}</tr>
         </td>
         </tr>
      </ng-container>
   </ng-container>
</table>    

Input JSON:
[{“category”:”Category1″,”fields”:[{“name”:”Code”,”value”:”abcd”},{“name”:”Kind”,”value”:”Test”},{“name”:”SubKind”,”value”:”Test”},{“name”:”StatusKind”,”value”:”Completed”},{“name”:”CreatedTime”,”value”:”1696917538000″},{“name”:”CrewGroup”,”value”:”TestGrp1″},{“name”:”Ext_ReferenceNumber”,”value”:”EXT_REF_0020019″}]},{“category”:”Category2″,”fields”:[{“name”:”Code”,”value”:”CUST_0020019″},{“name”:”Name”,”value”:”TEST_FN2171022″},{“name”:”Type”,”value”:”INDIVIDUAL”},{“name”:”Mobile”,”value”:”31867190″},{“name”:”Mail”,”value”:”[email protected]”}]}]

Expected Output in Mat-Table:

Need to populate below HTML table using this array as follow image