Expanding under a row in a table

[shut spire]

So i have this table of products, and some products that are type of MAIN, have button that will retrieve a list of related products to it i having trouble with this anyone got any good guide or tutorials on how to expand under the row to show a list of objects because the examples at the documentation includes a single object

[tropic dirge]

which documentation are you talking about?

I guess you're talking about material table, and this example? https://material.angular.io/components/table/examples

Have you tried using an ngFor inside the expanded element template to display your list of related products?

[plucky coral]

you can expand a component.

<ng-container matColumnDef="expandedDetail">
    <td *matCellDef="let element" [attr.colspan]="columnsToDisplay.length" mat-cell>
      <div [@detailExpand]="element?.tid === expandedElement?.tid ? 'expanded' : 'collapsed'"
           class="example-element-detail">
        <inventoryitem-select-item-expanded
                [data]="element"
                [placeholders]="placeholders"
        >
        </inventoryitem-select-item-expanded>
      </div>
    </td>
  </ng-container>

a copy paste from some of my code
Most of the code in the example is how to make it expand and do it smoothly. They just show some text. What you expand and show is up to you.

[shut spire]

I’ll try this tomorrow thanks