Cannot customize ag-Grid custom tooltip with tooltip component - angular6

Question

I need to implement a customized tooltip for ag-Grid in angular 6.
Following is my code :
app.component.ts
import { Component, OnInit } from '#angular/core';
import { MyTooltipComponent } from '../my-tooltip/my-tooltip.component';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
private frameworkComponents = {};
constructor() {
this.frameworkComponents = { myTooltipComponent: MyTooltipComponent };
}
aggridConfig0: any = {
rowData: [],
columnDefs: [],
defaultColDef: {
filter: true,
sortable: true,
resizable: false,
editable: false,
enableRowGroup: false,
tooltipComponent: "myTooltipComponent"
},
cubeXCreateAgGridColumn: (data) => {
let temp = [];
data.forEach((val, key) => {
if (key == 0) {
Object.keys(val).forEach((name) => {
temp.push({
headerName: name,
field: name,
tooltipField: tooltipName
})
})
}
});
return temp;
}
}
private gridApi0;
private gridColumnApi0;
agGrid;
onGridReady0(params) {
this.agGrid = [
{
"header1": "abc",
"header2": "efg"
},
{
"header1": "def",
"header2": "xyz"
}
];
this.gridApi0 = params.api;
this.gridColumnApi0 = params.columnApi;
this.aggridConfig0.rowData = this.agGrid;
this.gridApi0.setColumnDefs(this.aggridConfig0.cubeXCreateAgGridColumn(this.aggridConfig0.rowData));
}
}
app.component.html
<ag-grid-angular class="ag-theme-balham base-padding" style="height: 500px"
[rowData]="aggridConfig0.rowData"
[columnDefs]="aggridConfig0.columnDefs"
[defaultColDef]="aggridConfig0.defaultColDef"
[animateRows]="true"
[suppressDragLeaveHidesColumns]="true"
(gridReady)="onGridReady0($event)"
[frameworkComponents]="frameworkComponents">
</ag-grid-angular>
my-tooltip-component.ts
import {Component, ViewEncapsulation} from '#angular/core';
import {ITooltipAngularComp} from "#ag-grid-community/angular";
#Component({
selector: 'my-tooltip-component',
template: `
<div class="custom-tooltip">
<p><span>Header 1 : {{data.header1}}</span></p>
<p><span>Header 2 : {{data.header2}}</span></p>
</div>`,
styles: [
`
:host {
position: absolute;
width: 150px;
height: 70px;
border: 1px solid cornflowerblue;
overflow: hidden;
pointer-events: none;
transition: opacity 1s;
}
:host.ag-tooltip-hiding {
opacity: 0;
}
.custom-tooltip p {
margin: 5px;
white-space: nowrap;
}
.custom-tooltip p:first-of-type {
font-weight: bold;
}
`
]
})
export class MyTooltipComponent implements ITooltipAngularComp {
private params: any;
private data: any;
agInit(params): void {
this.params = params;
console.log("params here not printing............",params)
this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
this.data.color = this.params.color || 'white';
}
}
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AgGridModule } from 'ag-grid-angular';
import 'ag-grid-enterprise';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { MyTooltipComponent } from './component/my-tooltip/my-tooltip.component';
#NgModule({
declarations: [
AppComponent, MyTooltipComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
AgGridModule.withComponents([MyTooltipComponent])
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }
Please find the stackblitz url here :
https://stackblitz.com/edit/my-tooltip-app
I am not able to show the customized data from my-tooltip.component.ts to the header1 column tooltip.
I have referred - https://www.ag-grid.com/javascript-grid-tooltip-component/
Please help me out. Thanks in advance

Answer 1

The issue is resolved now.
There was an issue with the AgGrdModule that I imported. Which was previously imported from ag-grid-angular library.
I changed it to #ag-grid-community/angular
In my app.module.ts
import { AgGridModule } from "#ag-grid-community/angular";
Thanks everyone..!!