Using ng-template as cellRenderer in ag-grid / Angular 5



It would seem that whenever you want to customize the output of the cell by something more than just text transformation, you need a cellRenderer. But it requires a whole new component to fulfill that goal. That approach is, in general, fine, but I've found that in my project I'm using grids a lot, and I need custom cell renderers for them. Most of the time they are also not re-usable and specific to particular grid. The overhead for creating (and storing somewhere in the filesystem) another component, just for the sake of providing an HTML template structure, seems a bit overkill to me.

Is there a way to render a cell in Ag-Grid, without specifying a full-blown component, inheriting from AgGrid renderers? For instance, can I just use ng-template with #id reference, that I could pass somehow to Ag-Grid?

1 Answer: 

Below is an example of using ng-template in cell renderer custom component, you can create multiple spans and you can use ngif to show and hide or control which element to display based on a property. In below code, I am using only one span and you can modify based on your needs. Also after writing this cell renderer component, I assign the name to the cell renderer of ag-grid in coldefs.

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

    selector: 'tooltip-cell',
    template: `<ng-template #popTemplate>
                    <div class="tooltip-renderer">
                         Created By: {{creator}} <br/>
                         Created On: {{crDateTime | date:'short'}} <br/>
                         Revised By: {{revisor}} <br/>
                         Revised On: {{revDateTime | date:'short'}} <br/>
                <span [tooltip]="popTemplate" placement="left" container="body" triggers="mouseenter mouseleave dblclick">{{params.value}}</span>` })

export class ToolTipRenderer implements ICellRendererAngularComp {
    public params: any;
    public creator: any;
    public crDateTime: any;
    public revisor: any;
    public revDateTime: any;

    agInit(params: any): void {
        this.params = params;
        this.creator =["Creator"];
        this.crDateTime =["CrDate"];
        this.revisor =["Revisor"];
        this.revDateTime =["RevDate"];
    refresh(): boolean {
        return false;
var colDef1 = {
    cellRenderer: "tooltipRenderer",