ng2 smart table how to hide the delete icon depending on column value

Question

I have integrated the ng2 smart table.

In the action column I have displayed the edit and delete links.

I want to hide the delete and edit links depending on the column value. If the status is active the edit and delete links need to hided.

Below is my settings

    settings = {
selectMode: 'multi',
mode: 'external',
hideSubHeader:true,
editable:false,
pager : {
    display : true,
    perPage:20
},
actions: { add: false, edit: true, delete:true, position:'right'},
      edit: {
        editButtonContent: '<i class="fa fa-pencil"></i>'
        //mode: 'external'
      },
      delete: {
        deleteButtonContent: '<i class="fa fa-trash" aria-hidden="true"></i>',
        confirmDelete: true
      },
  columns: {
    id: {
      title: 'ID'
    },
    title: {
      title: 'Title'
    },
     status: {
      title: 'Status',
      type: "html",
      valuePrepareFunction: (value) => { 
        if(value == 'To be approved') {
          return '<span class="unapproved">'+value+'</span>'  
        } else {
          //actions.edit  = false;
          return '<span class="approved">'+value+'</span>'  
        }

      }

    }
  }
};

This is the code that I have used

 <ng2-smart-table id="ng2_smart" [settings]="settings" [source]="data" (edit)="onEdit($event)" (delete)="onDelete($event, content)" (custom)="onCustom($event)" (userRowSelect)="selectedData($event)"></ng2-smart-table>

@Sam Have you got any solution on this issue ? I'm also facing same issue. — Sachin Shah, Oct 12 '18 at 05:41
Above answer not work in multi datas. so try it.https://stackoverflow.com/questions/50817642/angular-5-ng2-smart-table-hide-disable-actions-column-conditionally/52781288#52781288 — Jai Kumaresh, Oct 13 '18 at 07:42

score 0 · Answer 1 · answered Dec 25 '17 at 08:24

Use a global boolean variable for initialize it a show/hide by Status column. and use it in action object. try this below code

 var isEditOrDelete=true;
    
    
    settings = {
    selectMode: 'multi',
    mode: 'external',
    hideSubHeader:true,
    editable:false,
    pager : {
        display : true,
        perPage:20
    },
    actions: { add: false, edit: isEditOrDelete , delete:                   
              isEditOrDelete, position:'right'},
     edit: {
            editButtonContent: '<i class="fa fa-       pencil"></i>'
            //mode: 'external'
          },
     delete: {
            deleteButtonContent: '<i class="fa fa-trash" aria-
                                  hidden="true"></i>',
            confirmDelete: true
          },
  columns: {
        id: {
          title: 'ID'
        },
        title: {
          title: 'Title'
        },
         ststus:{
            title: 'Status',
            type: "html",
            valuePrepareFunction: (value) => { 
                 if(value == 'To be approved') {
                 isEditOrDelete = false;
                 return '<span class="unapproved">'+value+'</span>'  
                } else {
                isEditOrDelete = true;
                return '<span class="approved">'+value+'</span>'  
             }
           }
        }
      }
    };

I tried this. But not working. For each record the status value will be changed. Some records 'Approved' Some are 'To be approved' . If so what will be the isEditOrDelete variable? — Sam Hanson, Dec 26 '17 at 05:39

ng2 smart table how to hide the delete icon depending on column value

1 Answers1