How to add inner rows dynamically in angular material table

Question

Given this code https://stackblitz.com/edit/angular-nested-mat-table-iwytas?file=app%2Ftable-expandable-rows-example.ts But the data for inner rows are loaded when the component is loaded. Is there any way to load inner rows on request, i.e. when click the external row to check if there are any inner rows related to that and if yes then to load them

Answer 1

You can simply use this with the material.

<td mat-cell *matCellDef="let disRow">{{disRow[colIndex]}}</td>

The definition of *matCellDef was empty. Also, as the array of data relies on the position of the data, I used colIndex as the key to find the row data, but I prefer using key/value pair because they are less error prone: if a column of customerHeader is not part of the displayed columns, the row's cells may not match the correct column.

Please check this example code on stackblitz with the modifications: https://stackblitz.com/edit/angular-ivy-2ngiqh?file=src/app/app.component.html