I’m trying without success to display a child table using mat-table syntax as the expanded part of a row in another mat-table (parent table) when a user clicks on that collapsed row.

I based my work on this example.

The animations defined in the component do the work of hiding/showing the details of the rows by setting the height to 0px. This works fine when using the mat-list syntax, but when I replace that syntax with mat-table syntax for the detail part, the row does no longer expand.

Unclear to me why these animations are being applied in the first example and why not in the second.

Here is the animations code:

  animations: [
                trigger('detailExpand', [
                                          state('collapsed', style({ height: '0px', minHeight: '0' })),
                                          state('expanded', style({ height: '*' })),
                                          transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
                                        ]),
              ],

Here is the code that works:

    <ng-container matColumnDef="expandedDetail">
      <td mat-cell *matCellDef="let row" [attr.colspan]="displayedFacturenColumns.length">
        <div class="row student-element-detail" [@detailExpand]="row.isExpanded ? 'expanded' : 'collapsed'">

          <!-- THIS PART WORKS : BEGIN -->

          <mat-list>
            <div mat-subheader>Goedkeurders voor factuur: {{row.invoiceid}}</div>
            
            @for(approver of row.approvers; track approver)
                {
                <mat-list-item >
                  <div mat-line>{{approver.name}}</div>
                  <div mat-line> {{approver.email}}</div>
                </mat-list-item>
                }
          </mat-list>

          <!-- THIS PART WORKS : END -->

        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedFacturenColumns"></tr>
    <tr mat-row  *matRowDef="let row; columns: displayedFacturenColumns;"(click)="rowClickExpand(row)"></tr>
  
    <!-- Extra row to show detail content column -->
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="student-detail-row"></tr>

When I replace the detail lines with mat-table syntax, I can no longer expand the row:

    <ng-container matColumnDef="expandedDetail">
     <td mat-cell *matCellDef="let row" [attr.colspan]="displayedFacturenColumns.length">
        <div class="row student-element-detail" [@detailExpand]="row.isExpanded ? 'expanded' : 'collapsed'">

            <!-- THIS PART DOES NOT WORK : BEGIN -->

            <div mat-subheader>Goedkeurders voor factuur: {{row.invoiceid}}</div>
            @for(approver of row.approvers; track approver)
            {
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Naam goedkeurder</th>
              <td mat-cell *matCellDef="let row">{{approver.name}}</td>

              <th mat-header-cell *matHeaderCellDef mat-sort-header>email goedkeurder</th>
              <td mat-cell *matCellDef="let row">{{approver.email}}</td>

            }

            <!-- THIS PART DOES NOT WORK : END -->

        </div>
     </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedFacturenColumns"></tr>
    <tr mat-row  *matRowDef="let row; columns: displayedFacturenColumns;"(click)="rowClickExpand(row)"></tr>
  
    <!-- Extra row to show detail content column -->
    <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="student-detail-row"></tr>

Can someone identify why this is the case?