Table with expandable rows with 'lazy rendering' - angular material

Question

I want to implement lazy loading on a material table with expandable rows. load the expanded data only after the row was clicked

example StackBlitz for Table with expandable rows.

In my project, from the main expanded table, I call another component inside the expanded-row space, that renders some data (inside the expanded row ).

like this:

  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
           <!--another component load  -->
           <p>
              <app-another-table [fromMainTable] = 'true'></app-another-table>
           </p>
      </div>
    </td>
  </ng-container>

The problem is that, by default, the expansion rows content will be initialized even when they are close. instead, I want to defer initialization until a specific row was clicked, and only the content related to his (the clicked row) expend space will load

Answer 1

I wanted the same in my project. I simply wrapped the component inside a ng-container and added the *ngIf directive as shown below.

     <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
  <ng-container matColumnDef="expandedDetail">
    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
      <div class="example-element-detail"
           [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
        <ng-container *ngIf="expandedElement === element">
           <!--another component load  -->
           <p>
              <app-another-table [fromMainTable] = 'true'></app-another-table>
           </p>
        </ng-container>
      </div>
    </td>
  </ng-container>