I successfully set up an Angular Application and decided to utilize ag-grid community as a key component for displaying data from a backend API in tables, using fontawesome icons to enhance readability.
While everything looks fine and my application is functioning well, I encountered an issue when attempting to apply a ngbPopover tooltip to a cell renderer-rendered icon (ticks and x's representing approved boolean values), along with the name of the user who approved an action. The icon renders correctly but the popover does not appear.
I've tried troubleshooting without success, unable to find any specific Angular/TypeScript solutions. I suspect that the renderer may be operating outside of the Angular lifecycle, causing the generated popover to not be present at the correct time for handling.
In a previous version of Angular, I had a similar setup working without using ngbpopover, but I wanted to integrate it here.
Furthermore, I attempted to switch the tooltip to be on the cell using tooltipField, but I found the hitbox inadequate and unclear. I specifically want the tooltip to appear on my image.
approvalCellRenderer(cell: any) {
const popover = `
ngbPopover="Popover Working!"
triggers="mouseenter:mouseleave"
popoverTitle="Pop titleimg"
container="body"
`;
const tick = '<i class="fa fa-check-circle" style="color:green" ' + popover + '></i>';
const cross = '<i class="fa fa-times-circle align-center" style="color:red"' + popover + '></i>';
const start = '<div class="">';
const end = '</div>';
let result = start + tick + end;
if (cell.value === null) {
result = start + cross + end;
}
return result;
}
I would appreciate any advice on what might be causing this issue.