Click function in ng2-smart-table column

Question

I have been trying to get a click function to be included in a ng2-smart-table column. It seems angular (click) event and javascipt "onclick" do not get rendered in the table. The code is below

public settings = {
selectMode: 'single',  //single|multi
hideHeader: false,
hideSubHeader: false,
actions: {
  columnTitle: 'Actions',
  add: false,
  edit: false, // true,
  delete: false, // true,
  custom: false
},
noDataMessage: 'No data found',
columns: {
  IsComplete: {
    title:'Status',
    type:'html',
    filter: false,        
    valuePrepareFunction: (value) => {
      // return value===true ? 'Complete' : 'Pending';
      if(value===true){
        return  '<div class="text-nowrap text-success"><i class="fa fa-check-circle-o"> Complete</i></div>'; //  Complete';
        //return  'Complete';
      } else {
        //return  'Pending';
        return  '<div class="text-nowrap text-warning"><i class="fa fa-exclamation-circle"></i> Pending</div>'; //  Pending';
      }
    }
  },
  DateCreated: {
    title: 'Date created',
    type: 'string',
    filter: true,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },      
  MemberName: {
    title: 'Member',
    type: 'string',
    filter: true
  },
  Start: {
    title: 'Start date',
    type: 'string',
    filter: false,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },
  End: {
    title: 'End date',
    type: 'string',
    filter: false,
    valuePrepareFunction: (date) => {
      var raw = new Date(date);
      var formatted = new DatePipe('en-EN').transform(raw, 'dd MMM yyyy');
      return formatted;
    }
  },
  OrderId: {
    title: 'Details',
    type: 'html',
    filter: false,
    valuePrepareFunction: (OrderId) => {
      return  '<a onclick="onCustom($event)" href="/pages/order/' + OrderId + '"><i class="fa fa-search"></i> view</a>'; //  Complete';
    }
  }

The column of interest is "OrderId" event to be fired is below, however I also want the user to be able to right-click the link and select open new tab, etc, hence the link as well as the click function.

onCustom(event) { this.router.navigateByUrl('/pages/order/' + event.data.OrderId); }

Using dev tools I see that the onclick or (click) is ignored and all I get is the link;

<a href="/pages/order/411"><i class="fa fa-search"></i> view</a>

Update: I have also thought of using a custom action column to take advantage of the "onCustom()"function called but have not been able to get valuePrepareFunction to be rendered (only get "title" property rendering) or reference the row data in the "title" property like so.

custom: [{
name: 'view',
title: 'View ',
type: 'html',
valuePrepareFunction:(row)=>{
  return `<a title="See Detail Product "href="Your api key or something/${row.OrderId}"> <i class="ion-edit"></i></a>`
},

} ],

Sachin Shah Sachin Shah · Accepted Answer · 2019-01-28T06:18:59

When you used valuePrepareFunction pass type=custom. Try with custom as a type instead of html

Update

You can user renderComponent feature.

type: 'custom',
valuePrepareFunction: (cell, row) => {
   return row.columnName;
},
renderComponent: NewComponent,

Hear you have to make a one component and then pass in renderComponent.

component.ts

import { Component,Input, OnInit } from '@angular/core';
import { ViewCell } from 'ng2-smart-table';

@Component({
 selector: '',
 templateUrl: '',
 styleUrls: ['']
})
export class NewComponent implements ViewCell, OnInit {
  renderValue: string;
  @Input() value: string | number;
  @Input() rowData: any;

  constructor() { }

 ngOnInit() {
    this.renderValue = this.value.toString();
 }

 clicked(name){
   console.log(name);
 }

}

html file

<span (click)="clicked(renderValue)">{{renderValue}}</span>

Click function in ng2-smart-table column

1 Answers