Custom action with custom icon

[christopherzimmerman]

I am using ionicons to add custom icons for add/delete/edit actions like this:

add: {
  addButtonContent: '<i class="nb-plus"></i>',
  createButtonContent: '<i class="nb-checkmark"></i>',
  cancelButtonContent: '<i class="nb-close"></i>',
},

I want to add a custom action, and give it a custom icon as well. I have tried this:

custom: [
    {
      name: 'view',
      title: 'View ',
    },
],

and then also adding:

view: {
    viewButtonContent: '<i class=nb-plus"></i>,
},

But this does not work for me. Any help would be appreciated.

[jorgearal]

In my source:

data[i].inactivarLink = '/horariosLaborales/inactivar/' + data[i].ID;

In my table settings:

            inactivarLink: {
                title: 'Inactivar',
                filter: false,
                type: 'custom',
                renderComponent: IconViewComponent,
                width: '5%'
            }

My IconViewComponent:

@Component({
    selector: 'icon-view',
    template: `
        <a [routerLink]="link" [style.color]="style">
            <i fa [name]="icon" [size]=1></i>
        </a>
    `,
})
export class IconViewComponent implements ViewCell, OnInit {
    link: string;
    icon: string;
    style: string;

    @Input() value: string;
    @Input() rowData: any;

    ngOnInit() {
        this.link = this.value;
        //this.style = '#444242';

        if(this.link.indexOf('ver') > 0) {
            this.icon = 'search';
        }
        else if(this.link.indexOf('editar') > 0) {
            this.icon = 'edit';
        }
        else if(this.link.indexOf('inactivar') > 0) {
            this.icon = 'close';
        }
        else if(this.link == "A") {
            this.link = null;
            this.icon = 'check-square-o';
            this.style = 'green';
        }
        else if(this.link == "I") {
            this.link = null;
            this.icon = 'square-o';
            this.style = 'red';
        }
    }
}

Those things will look like this:

Hope it helps (sorry commenting late)

[sanketkdarji]

This might be useful.

custom: [{ name: 'view', title: '<i class="nb-plus"></i> ' }]

[DependencyHell]

Try this :

    actions: {
      add: false,
      edit: true,
      custom: [{ name: 'ourCustomAction', title: '<i class="ion-document"></i>' }],
      position: 'right'
    },
    edit: {
      editButtonContent: '<i class="nb-compose"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmSave: true
    },

[maritelses]

Does it save you changes in the database? Cause at refreshing, I lose changes when deleting or editing

[ShamoX]

Does it save you changes in the database? Cause at refreshing, I lose changes when deleting or editing

This is an other topic, but you have to use the callbacks to save your changes yourself to the database. ng2-smart-table is only a presentation (View) component. It doesn't perform any communication with your database/API.

[AnkitThapliya1]

settings = {

edit: {
  editButtonContent: '<span class="material-icons">mode_edit</span>',
  saveButtonContent: '<span class="material-icons">check_circle</span>',
  cancelButtonContent: '<span class="material-icons">cancel</span>'
},

delete: {
  deleteButtonContent: '<span class="material-icons">delete</span>',
  confirmDelete: true,
},
add: {
  addButtonContent: '<span class="material-icons">add</span>',
  createButtonContent: '<span class="material-icons">check_circle</span>',
  cancelButtonContent: '<span class="material-icons">cancel</span>'

}, actions: {

  custom: [{ name: 'view', title: '<i class="material-icons" >home</i>'},
 ]


}