Ng2-Smart-Table Bind 'Add New' Button Event to an External Button

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

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

ng2-smart-table subscribe edit

this happens because ng2-smart-table needs the mode value to be modified in its settings

settings = {
actions: {
  columnTitle: 'Actions'
},
mode: 'external',

Custom action method not working in ng2 smarttable

There must be an issue with the function in your component, the code you have shared in your question is setup correctly and works in this stackblitz.

Please note: when the copy button is clicked the event is passed to the onCustom function in the app.component.ts and logs the event in the console.

https://stackblitz.com/edit/smarttable-e8gqql?embed=1&file=app/app.component.ts

Unable to get save data event in ng2-smart-table

It's a common issue, you need to set in the configuration object the confirmCreate property, like this:

export const settings= {
  delete: {
    confirmDelete: true,
    ...
  },
  add: {
    confirmCreate: true,
    ...
  },
  edit: {
    confirmSave: true,
    ...
  },
....

---

Related Topics