Menu
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> 
356
You can use DataTable createdRow attribute to add edit /delete buttons in an empty action column (include the empty column in columnDef). This way you can add row UID in buttons, which will make it easier to trigger click actions.
Mention editLink and deleteLink in colModel name of edit and delete for display Edit and Delete button in jqgrid for each row. Show activity on this post. I got it, Just take additional column, and add formaater actions as model class. That's it.
The edit button type is added to DataTables by Editor and provides a pre-defined button that will call the edit() method to trigger the editing of the selected rows in the DataTable.
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
