Search code examples
angulardelete-rowng2-smart-table

Not able to get delete event in ng2-smart-table in angular 6


I'm using ng2-smart-table to display data in angular 6 app. Now I'm not able to get delete event. I have set setting object like this.

columns: {
  ... // Columns... 
},
edit: {
  confirmSave: true,
  editButtonContent: '...',
  saveButtonContent: '...',
  cancelButtonContent: '...'
},  
delete: {
   confirmDelete : true,
   deleteButtonContent: '...',
   saveButtonContent: '...',
   cancelButtonContent: '...'
},

In HTML file I have set this.

<ng2-smart-table [settings]="Settings" [source]="DataSource" (createConfirm)="onCreate($event)" (confirmDelete)="onRoleDelete($event)"></ng2-smart-table>

In .ts file

onRoleDelete(event) {
   alert("Delete works");
}

I have check it's git and also refer other examples also. I'm also able to get edit event but not getting only delete event.

Delete icon is also view in HTML file.


Solution

  • Try deleteConfirm instead confirmDelete

    Please refer Demo for better understanding

    DEMO

    Remove mode: 'external',

    <ng2-smart-table [settings]="settings" [source]="DataSource" (createConfirm)="onCreate($event)" (deleteConfirm)="onRoleDelete($event)"></ng2-smart-table>
    

    Configure:

      settings = {
        delete: {
          confirmDelete: true,
        },
        add: {
          confirmCreate: true,
        },
        edit: {
          confirmSave: true,
        },
        columns: {
          id: {
            title: 'ID',
          },
          name: {
            title: 'Full Name',
          },
          username: {
            title: 'User Name',
          },
          email: {
            title: 'Email',
          },
        },
      };
    
      data = [
        {
          id: 1,
          name: "Leanne Graham",
          username: "Bret",
          email: "Sincere@april.biz"
        },
        {
          id: 2,
          name: "Ervin Howell",
          username: "Antonette",
          email: "Shanna@melissa.tv"
        },
    
        // ... list of items
    
        {
          id: 11,
          name: "Nicholas DuBuque",
          username: "Nicholas.Stanton",
          email: "Rey.Padberg@rosamond.biz"
        }
      ];
    
      onDeleteConfirm(event) {
        console.log("Delete Event In Console")
        console.log(event);
        if (window.confirm('Are you sure you want to delete?')) {
          event.confirm.resolve();
        } else {
          event.confirm.reject();
        }
      }
    
      onCreateConfirm(event) {
        console.log("Create Event In Console")
        console.log(event);
    
      }
    
      onSaveConfirm(event) {
        console.log("Edit Event In Console")
        console.log(event);
      }
    

    Reference ---> https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/various/advanced-example-confirm.component.ts