I am facing an issue with the current angular ag-grid tooltip example, as it is not functioning properly.
https://stackblitz.com/edit/angular-ag-grid-tooltip-example-fb7nko
Utilizing Javascript/typescript in Angular 8 with the latest ag-grid release. I have meticulously followed the plunker example but to no avail. In my CustomTooltipComponent, there is a dynamic mat-tooltip in the template that should display {{data}} from the .ts file. However, the tooltip does not appear. When I substituted it with a span tag, it displayed plain text. I have ensured that the created component is added to my entry and declaration modules.
<<<---- component that wants the tooltip --->
this.gridOptions = {
deltaRowDataMode: true,
getRowNodeId: (data) => data.name,
onRowDoubleClicked: (data) => this.selectRow(data),
rowSelection: 'single',
defaultColDef: {
sortable: true,
resizable: true,
tooltipComponentFramework: CustomTooltipComponent,
tooltipValueGetter: (params: ITooltipParams) => params.data,
}
};
this.columnDefs = [
{
headerName: 'Name',
field: 'name',
sort: 'asc',
// tooltipField: 'name'
}
<<<-------- tooltip component .ts ------->>>
import { Component } from '@angular/core';
import { ITooltipAngularComp } from 'ag-grid-angular';
import { ITooltipParams } from 'ag-grid-community';
@Component({
selector: 'app-custom-tooltip',
templateUrl: './custom-tooltip.component.html',
styleUrls: ['./custom-tooltip.component.scss'],
})
export class CustomTooltipComponent implements ITooltipAngularComp {
public params: ITooltipParams;
public data: any;
constructor() { }
agInit(params: ITooltipParams): void {
this.data = params.api.getDisplayedRowAtIndex(params.rowIndex).data;
}
}
<<<----------- tooltip component .html ---->>>
<span matTooltip="{{data.name}}"></span>
<div>
<p><span>Name: </span>{{data.name}}</p>
<p><span>Created by: </span>{{data.createdBy}}</p>
<p><span>Modified by: </span>{{data.modifiedBy}}</p>
</div>
My expectation was to see a tooltip in mat-tooltip format and for the toolTipParams: () to function correctly with this approach.