Ag-grid custom tool tip component doesn't work

Question

My custom tooltip is pretty simple

custom.ts file

import { Component } from '@angular/core';
import {ITooltipAngularComp} from 'ag-grid-angular';

@Component({
  selector: 'app-custom-columnheader-tooltip-component',
  templateUrl: './custom-columnheader-tooltip-component.html',
  styleUrls: ['./custom-columnheader-tooltip-component.css']
})

export class CustomColumnheaderTooltipComponent implements ITooltipAngularComp {
  private params: any;

  agInit(params): void {
    console.log("test tooltip");
    this.params = params;
  }
}

custom.html file:

I imported the component in app.module.ts file and added it as part of declarations and withComponents

app.module.ts file:

    import {CustomColumnheaderTooltipComponent} from '...';

    declarations: [
    CustomColumnheaderTooltipComponent],
    imports: [AgGridModule.withComponents([CustomColumnheaderTooltipComponent])]

my main component which calls this custom tooltip is as follows:

main.ts
    frameworkComponents = {
        customTooltip: CustomColumnheaderTooltipComponent}

    IN my default col Definitions:
      defaultColDef: ColDef = {
        enableRowGroup: true,
        filter: true,
        resizable: true,
        sortable: true,
        autoHeight: true,
        valueFormatter: this.cellValueFormatter.bind(this), // numeric formatting
        cellRenderer: this.cellRenderer,
        headerTooltip: 'hi',
        tooltipComponent:'customTooltip'
      };

I was hoping the header tooltip string will be picked up by the tool tip component and it is displayed as a part of that component as 'header name: hi' but my application just displays 'hi' as the tool tip. I cant see the console logging within the agInit() , basically it doesn't connect to that component for the tool tip. Any suggestions are highly appreciated.

Pratik Bhat Pratik Bhat · Accepted Answer · 2020-06-05T03:26:08

Looks like you have problem in registering your custom tooltip

In my app.module.ts

I would do something like below -

imports: [
    BrowserModule,
    FormsModule,
    AgGridModule.withComponents(
        [CustomColumnheaderTooltipComponent]
    )
],
declarations: [
    ............,
    CustomColumnheaderTooltipComponent,
    ...........
],

Check this github example from official ag grid doc

Ag-grid custom tool tip component doesn't work

1 Answers