How to add a new custom button for ng2-smart-table

Question

I'm using ng2-smart-table as a table in my project.You can see it in below.

However I want to add a custom button named view for this at end of the each row of table. As well as I want to open a new component when click the view button. Then what i should do for this. I tried as follows. but not success.

add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
  confirmCreate: true
},
edit: {
  editButtonContent: '<i class="nb-edit"></i>',
  saveButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
  confirmSave: true
},
delete: {
  deleteButtonContent: '<i class="nb-trash"></i>',
  confirmDelete: true
},
view:{
  viewButtonContent:''
},

What is this? `add: { addButtonContent: '', createButtonContent: '', cancelButtonContent: '', confirmCreate: true }, ...` — Lakindu Akash, May 01 '19 at 19:28
Possible duplicate of [add custom button in actions column in ng2-smart-table angular 2](https://stackoverflow.com/questions/40572979/add-custom-button-in-actions-column-in-ng2-smart-table-angular-2) — Sigma Dev, May 17 '19 at 16:36

score 6 · Accepted Answer · answered May 01 '19 at 19:27

Define settings like this.


settings = {
    columns: {
      name: {
        title: 'Title',
      },
      description: {
        title: 'Description',
      },

      customColumn: {
        title: 'Actions',
        type: 'custom',
        filter: false,
        renderComponent: MyCustomComponent,
        onComponentInitFunction(instance) {
          //do stuff with component
          instance..subscribe(data=> console.log(data))
          }
   ...

And define new button component like this,


@Component({
  selector: 'll-button-comp',
  template: ` <button (click)="click.emit(rowData)"> my button</button> `
})

export class MyCustomComponent implements OnInit{
  @Input() rowData: any;
  @Output() click:EventEmitter<any> = new EventEmitter(this.rowData);


  ngOnInit(){

  }
}

Note that rowData (object of the selected row) is passed to the component which rows that instance belongs

How to add a new custom button for ng2-smart-table

1 Answers1