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


Keywords:angular 


Question: 

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";

@Component({
    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/>
                    </div>
                </ng-template>
                <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 = params.data["Creator"];
        this.crDateTime = params.data["CrDate"];
        this.revisor = params.data["Revisor"];
        this.revDateTime = params.data["RevDate"];
    }
    refresh(): boolean {
        return false;
    }
}
var colDef1 = {
    cellRenderer: "tooltipRenderer",
    ...
}