How to make expandable table rows within an ngFor loop [Angular]?

Question

I've nested tables, when a row is clicked I need to display data underneath the table row. However, the data is being displayed at the end of ngRepeat.

HTML:

  <table class="table table-hover table-bordered table-responsive-xl">
  <thead>
    <th> Name </th>
    <th> Place </th>
    <th> Phone </th>
  </thead>

  <tbody>

  <tr *ngFor="let data of data1" (click) ="expand()">
        <td> +{{data.name}} </td>
        <td> {{data.place}} </td>
        <td> {{data.phone}} </td>
  <td> {{data.hobbies}} </td>
  <td> {{data.profession}} </td>
 </tr>

 <ng-container *ngIf="expandContent">
    <tr *ngFor="let data of data2">
        <td> {{data.datades.name}} </td>
        <td> {{data.datades.hobbies}} </td>
        <td> {{data.datades.profession}} </td>
 </tr>
 </ng-container>
 </tbody>
 </table>

Component :

export class AppComponent  {
expandContent = true;
  data1 =[{
 'name' : 'john',
 'place' : 'forest',
 'phone' : '124-896-8963'
  },{
 'name' : 'Jay',
 'place' : 'City',
 'phone' : '124-896-1234'
  }, {
 'name' : 'Joseph',
 'place' : 'sky',
 'phone' : '124-896-9632'
  },
  ]

 data2 =[{
'whoseData' : 'john',
'datades' : {
'name' : 'john',
'hobbies' : 'singing',
'profession' : 'singer'
 }
 },{
'whoseData' : 'Jay',
'datades' : {
'name' : 'jay',
'hobbies' : 'coding',
'profession' : 'coder'
}
}
]

 expand(){
this.expandContent = !this.expandContent
}
 }

When the first row is clicked I would like to display, the data associated with the first row, under it.

Expected result

DEMO

Answer 1

You would need to make these changes:

1. Include the main row and the corresponding detail rows in the same ngFor loop iteration
2. Add an expanded property to the data objects, instead of having the global expandContent
3. Define a method to filter the details of the clicked row

The template could look as follows:

<ng-container *ngFor="let data of data1">
  <tr (click)="data.expanded = !data.expanded">
    <td> {{ data.expanded ? '&ndash;' : '+'}} {{data.name}} </td>
    <td> {{data.place}} </td>
    <td> {{data.phone}} </td>
    <td> {{data.hobbies}} </td>
    <td> {{data.profession}} </td>
  </tr>
  <ng-container *ngIf="data.expanded">
    <tr *ngFor="let details of findDetails(data)">
      <td> {{details.datades.name}} </td>
      <td> {{details.datades.hobbies}} </td>
      <td> {{details.datades.profession}} </td>
    </tr>
  </ng-container>
</ng-container>

where findDetails is defined as:

findDetails(data) {
  return this.data2.filter(x => x.whoseData === data.name);
}

See this stackblitz for a demo.