I am using angular material table expandable rows

Question

I am using angular material table expandable rows. i need to add remove row button for each row. how i add it ?

material table with expandable row table expandable rows

i am using below html code for do it. actually i need to know how add "remove button" to each row

 <table mat-table [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8" matSort matSortDirection="asc" matSortDisableClear #table> <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns"> <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th> <td mat-cell *matCellDef="let user"> {{user[column]}} </td> </ng-container> <!-- 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 user" [attr.colspan]="displayedColumns.length"> <div class="example-element-detail" [@detailExpand]="user == expandedElement ? 'expanded' : 'collapsed'"> <div class="example-element-diagram"> <div class="example-element-position"> <h1>AA</h1> </div> <div class="example-element-symbol"> {{user.name}} </div> <div class="example-element-name"> {{user.age}} </div> <div class="example-element-weight"> {{user.active}} </div> </div> <div class="example-element-description"> <p> Each expansion-panel must include a header and may optionally include an action bar Each expansion-panel must include a header and may optionally include an action bar </p> <span class="example-element-description-attribution"> -- Wikipedia </span> </div> </div> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let user; columns: displayedColumns;" class="example-element-row" [class.example-expanded-row]="expandedElement === user" (click)="expandedElement = user"> </tr> <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr> </table> 

Answer 1

You need to have 2 collections for columns in the ts file, if you want to stick with that *ngFor.

Update columnsToDisplay: columnsToDisplay = ['name', 'weight', 'symbol', 'position','remove']; Add new collection for columns: labelColumns' = ['name', 'weight', 'symbol', 'position']; Don't forget to create a remove(user) function and to add "remove" to your displayed

<ng-container matColumnDef="{{column}}" *ngFor="let column of labelColumns">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> {{column}} </th>
    <td mat-cell *matCellDef="let user"> {{user[column]}}</td>
</ng-container>
<ng-container matColumnDef="remove">
    <th mat-header-cell *matHeaderCellDef >Remove</th>
    <td mat-cell *matCellDef="let user">  
        <button mat-button (click)="remove(user)">remove</button> 
    </td>
</ng-container>