Add custom button in actions column in ng2-smart-table in Angular 2

Question

In an ng2-smart-table in Angular 2 I want to add a new button in the actions column and by clicking on this button it will route to another page. This code has the add, edit, and delete buttons. I tried to make the new button like this but it's not working:

settings = {      add: {       addButtonContent: '<i  class="ion-ios-plus-outline"></i>',       createButtonContent: '<i class="ion-checkmark" ></i>',       cancelButtonContent: '<i class="ion-close"></i>',       confirmCreate: true     },     edit: {       editButtonContent: '<i class="ion-edit"></i>',       saveButtonContent: '<i class="ion-checkmark"></i>',       cancelButtonContent: '<i class="ion-close"></i>',       confirmSave: true     },     delete: {       deleteButtonContent: '<i class="ion-trash-a"></i>',       confirmDelete: true     },  

How can I add the button? I searched the documentation and I couldn't find anything related to this.

Answer 1

In my List component

actions: {       columnTitle: 'Actions',       add: false,       edit: false,       delete: true,       custom: [       { name: 'viewrecord', title: '<i class="fa fa-eye"></i>'},       { name: 'editrecord', title: '&nbsp;&nbsp;<i class="fa  fa-pencil"></i>' }     ],       position: 'right'     }, 

Then in the template

  <ng2-smart-table class="table table-hover" [settings]="settings" [source]="dataSet"    (deleteConfirm)="onDeleteConfirm($event)"  (custom)="onCustomAction($event)">   </ng2-smart-table> 

This function helped me decide on what custom action to execute.

onCustomAction(event) {       switch ( event.action) {         case 'viewrecord':           this.viewRecord(event.data);           break;        case 'editrecord':           this.editRecord(event.data);       }     }  public editRecord(formData: any) {       this.modalRef = this.modalService.open(AddProfileComponent);       this.modalRef.componentInstance.formData = formData;       this.modalRef.result.then((result) => {         if (result === 'success') {           this.loadData();         }       }, (reason) => {       });     }     public viewRecord(formData: any) {       this.modalRef = this.modalService.open(ViewProfileComponent);       this.modalRef.componentInstance.formData = formData;       this.modalRef.result.then((result) => {         if (result === 'success') {           this.loadData();         }       }, (reason) => {       });     } 

Answer 2

Try it:

In your columns setting, add one column "Actions":

  Actions: //or something   {     title:'Detail',     type:'html',     valuePrepareFunction:(cell,row)=>{       return `<a title="See Detail Product "href="Your api key or something/${row.Id}"> <i class="ion-edit"></i></a>`     },     filter:false          },   Id: { //this Id to use in ${row.Id}     title: 'ID',     type: 'number'   },