How to execute a function in custom action in ng2-smart-table?

1.3k Views Asked by At

I am trying to implement ng2 smart table to handle my pivot tables but I ran into the following confusion: Add custom actions for each record in the table and I have to make it so that when I click on that action I execute a function which I can't find how to do.

custom actions

actions: {
   custom: [
       {
          name: 'editAction',
          title: '<i class="nb-edit"></i>',
       },
       {
          name: 'deleteAction',
          title: '<i class="nb-trash"></i>'
       }
    ],
    position: 'right',
    add: false,
    edit: false,
    delete: false
}

Html

<nb-card-body>
   <ng2-smart-table [settings]="settings" [source]="source">
   </ng2-smart-table>
</nb-card-body>
2

There are 2 best solutions below

2
Otourou Da Costa On

You can do like this :

Custom actions: (in ts file)

  settings = {
    add: {
      addButtonContent: '+',
      createButtonContent: 'OK',
      cancelButtonContent: 'X',
      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,
    },
    columns: {...},
  };

Confirm methods : (in ts file)

onCreateConfirm(event: any): void {...};
onSaveConfirm(event: any): void {...};
onDeleteConfirm(event: any): void {...};

HTML:

<ng2-smart-table
      [settings]="settings" [source]="source"
      (createConfirm)="onCreateConfirm($event)"
      (editConfirm)="onSaveConfirm($event)"
      (deleteConfirm)="onDeleteConfirm($event)">
    </ng2-smart-table>
0
Juanpa On

For custom actions you need to hook (custom) event

<nb-card-body>
  <ng2-smart-table [settings]="settings" [source]="source" (custom)="onCustomEvent($event)">
  </ng2-smart-table>
</nb-card-body>

In your .ts you can use a switch to run functions depending on the value of event.action and use the row data as event.data

onCustomEvent(event) {
  switch (event.action) {
    case 'documento':
      this.doSomething(event.data);
      break;
    case 'editar':
      this.anotherFunction(event.data);
      break;
  }
}