How to use Angular ngbPopover in a CellRenderer for an ag-grid cell

Question

I have setup and got working a Angular Application which i decided to use ag-grid community as a key base component (displaying data from a back end API in tables and using fontawesome icons to make the data easy to read).

I have everything looking fine, and have my stuff going ok, but when i try to apply a ngbPopover tooltip to a cellrenderer rendered icon (ticks and x's for a approved boolean value) with the name of the user who approved an action the icon is rendered but my popover is not.

I have tried to troubleshoot it but cannot find any specific angular / TS based solutions - I also had a feeling that the renderer is rendering outside of the angular lifecycle and that the generated popover is not there because i miss the point at which it should be present to be caught and correctly handled.

I previously did this with the previous version of angular and had it working but we didn't use ngbpopover there - but i want to here.

Additionally i also have switched the tooltip to be on the cell with tooltipField but i really dont like the hit box on this and its not clear enough, i specifically want it 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;
  }

Any advice on what i am doing wrong would be great.

Answer 1

ag-grid cell-renderer is rendering the given custom renderer component within the cell itself. So you will not be able to visualize it as a popover since it is getting rendered within the cell.

Therefore what you can do is write a custom cell editor component and bind it to your cell, which will then display the information outside of the cell.

Sample Code

grid.component.html

<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

grid.component.ts

GridOptions and dummy data is set throught this.

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { OptionsCellRendererComponent } from './options-cell-renderer/options-cell-renderer.component';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit {
  gridOptions: GridOptions;

  constructor() { }

  ngOnInit() {
    this.gridOptions = {
    } as GridOptions;
  }

  onGridReady(params) {
    this.setData();
  }

  setData() {
    this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
    this.gridOptions.api.setRowData(this.getData());
  }

  getColumnDefinitions(): any {
    return [
      {
        field: 'option',
        headerName: 'Option',
        cellRendererFramework: OptionsCellRendererComponent
      },
      {
        field: 'year',
        headerName: 'Year'
      },
    ]
  }

  getData(): any {
    return [
      {
        option: '1',
        year: 1990
      },
      {
        option: null,
        year: 1991
      }
    ];
  }

}

options-cell-renderer.component.html

Showcase the reject or approve icon based on option value

<ng-template #approvePopup>
    This is a simple popover
</ng-template>

<img style="height: 20px; width:20px;" *ngIf="!isValid()" src="../../../assets/images/1.png" [ngbPopover]="approvePopup"
    placement="auto" triggers="mouseenter:mouseleave" />
<img style="height: 20px; width:20px;" *ngIf="isValid()" src="../../../assets/images/2.png" [ngbPopover]="approvePopup"
    placement="auto" triggers="mouseenter:mouseleave" />

options-cell-renderer.component.ts

Check the validity of the option value

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

@Component({
  selector: 'app-options-cell-renderer',
  templateUrl: './options-cell-renderer.component.html',
  styleUrls: ['./options-cell-renderer.component.css']
})
export class OptionsCellRendererComponent implements ICellRendererAngularComp {
  public params: any;
  option: string;

  agInit(params: any): void {
    this.params = params;
  }

  isValid(): boolean {
    return this.params.value !== undefined && this.params.value !== null;
  }


  refresh(): boolean {
    return false;
  }

  constructor() { }

}

This is how it will look like