"Edit / Delete" button for each row & header column is 'Action' in the md-table component
61,195
Solution 1
You are on the right track, you just need to add an actions
item to displayedColumns
list;
displayedColumns = ["username","email","userFirstName" ... ,"actions"];
and:
<ng-container cdkColumnDef="actions">
<md-header-cell > Actions </md-header-cell>
<md-cell *cdkCellDef="let row" >
<button md-raised-button >Edit</button>
</md-cell>
</ng-container>
Solution 2
For those looking for 6 and above
In your .ts
displayedColumns = ["username","email","userFirstName" ... ,"actions"];
and in your html
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef> Action </th>
<td mat-cell *matCellDef="let element">
<button mat-raised-button >Edit</button>
</td>
</ng-container>
Solution 3
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef>Actions </mat-header-cell>
<mat-cell *matCellDef="let row">
<button mat-icon-button matTooltip="Click to Edit" class="iconbutton" color="primary">
<mat-icon aria-label="Edit">edit</mat-icon>
</button>
<button mat-icon-button matTooltip="Click to Delete" class="iconbutton" color="warn">
<mat-icon aria-label="Delete">delete</mat-icon>
</button>
</mat-cell>
</ng-container>
Author by
Sundhar
Updated on May 30, 2021Comments
-
Sundhar almost 3 years
I am quite new in the angular 4 world and I'm trying to add "Edit / Delete" button for each row & header column is 'Action' in the md-table component in Angular Material design with Angular 4. how can I do this? customized header column & buttons for each row. any template available to do this? below is my HTML code.
userinfo.html
<!-- ID Column --> <ng-container cdkColumnDef="username"> <md-header-cell *cdkHeaderCellDef> User Name </md-header-cell> <md-cell *cdkCellDef="let row"> {{row.username}} </md-cell> </ng-container> <!-- Email Column --> <ng-container cdkColumnDef="email"> <md-header-cell *cdkHeaderCellDef> Email </md-header-cell> <md-cell *cdkCellDef="let row"> {{row.email}} </md-cell> </ng-container> <!-- First Name Column --> <ng-container cdkColumnDef="userFirstName"> <md-header-cell *cdkHeaderCellDef> First Name </md-header-cell> <md-cell *cdkCellDef="let row"> {{row.userFirstName}} </md-cell> </ng-container> <!-- Last Name Column --> <ng-container cdkColumnDef="userLastName"> <md-header-cell *cdkHeaderCellDef> Last Name </md-header-cell> <md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.userLastName}} </md-cell> </ng-container> <!-- Phone Column --> <ng-container cdkColumnDef="userMobile"> <md-header-cell *cdkHeaderCellDef> Phone </md-header-cell> <md-cell *cdkCellDef="let row" > {{row.userMobile}} </md-cell> </ng-container> <!-- Role Column --> <ng-container cdkColumnDef="authority"> <md-header-cell > Role </md-header-cell> <md-cell *cdkCellDef="let row" > {{row.authority}} </md-cell> </ng-container> <!-- Action Column <md-header-cell > Action </md-header-cell> <md-cell > <button md-raised-button >Edit</button> </md-cell> --> <md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row> <md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>