Embedding ng2 tooltip in ng2 smart table

Question

I have already installed ng2-tooltip-directive and imported in app.module.ts.

I am trying to add a tooltip to ng2 smart table cell for overflow but valuePrepareFunction() is only adding the class nodelist. I am expecting it to add all the tooltip properties as well. Here is the snippet:

  NODEBLIST: {
    title: 'eNodeB',
    type: 'html',
    valuePrepareFunction: (data) => '<div class="nodelist" ngbTooltip="You see, I show up on click!" triggers="click:blur">' + data + '</div>',
    // type: 'string',
  },

and when I inspect the elements it only shows the class was added:

<div class="nodelist">KSL05836 KSL09836R</div>

any insight on how to get the tooltip properties to be added would be greatly appreciated!

Answer 1

Angular Binding is not possible within the function valuePrepareFunction so better you drop the plan of html and use the custom component option instead.

 NODEBLIST: {
    title: 'eNodeB',
    type: 'custom',
    renderComponent: TooltipComponent
  },

component

Its just the sample code, you can modify as per your requirement.

import { Component, OnInit, Input, EventEmitter, Output, NgModule } from '@angular/core';

    @Component({
      selector: 'tooltip-view',
      template: `
        <div class="nodelist" ngbTooltip="You see, I show up on click!" triggers="click:blur">{{rowData.eNodeB}}</div>
      `,
    })

    @NgModule()
    export class TooltipComponent{
      renderValue: string;

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

    }

entryComponents

@NgModule({
  imports:      [ BrowserModule, FormsModule, Ng2SmartTableModule ],
  entryComponents: [CustomComponent]
})
export class AppModule { }

Note : Since the code is written in the stackoverflow editor directly, there could be typo or syntactical error. Please correct yourself.