javascriptangulartypescriptag-gridag-grid-angular

Ag-Grid Angular cellRenderer component cannot be invoked without 'new'


I'm trying to get a custom cell renderer class to work. Unfortunately I get following error in the browser console (building is all fine):

ERROR TypeError: Class constructor WarningRendererComponent cannot be invoked without 'new'
    at Adapter.getGui (ag-grid-community.cjs.js:35006:1)
    at push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.CellComp.afterCellRendererCreated (ag-grid-community.cjs.js:19379:1)
    at ag-grid-community.cjs.js:9754:1
    at new Promise (ag-grid-community.cjs.js:9729:1)
    at push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.Promise.then (ag-grid-community.cjs.js:9752:1)
    at createCellRendererFunc (ag-grid-community.cjs.js:19362:1)
    at push../node_modules/ag-grid-community/dist/ag-grid-community.cjs.js.AnimationFrameService.executeFrame (ag-grid-community.cjs.js:35597:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391:1)
    at Object.onInvokeTask (core.js:34182:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390:1)

The renderer component is just a template (without any functionality for now):

export class WarningRendererComponent implements ICellRendererAngularComp {
    value: any;

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

    refresh(params: ICellRendererParams) {
        return false;
    }
}

How it is integrated in the parent component:

{
    headerName: 'Market Retail Price',
    field: 'price',
    width: 160,
    editable: true,
    cellEditorFramework: NumericEditorComponent,
    cellRenderer: WarningRendererComponent,
    valueGetter: (params: any) => params.data.price || params.data.oprice,
    valueFormatter: (params: any) => this.numberFormatter(params.data.total_discount)
}

tsconfig.ts:

    "compilerOptions": {
        "target": "es2015",
    },

General information:

I actually followed the instructions below: https://www.ag-grid.com/angular-data-grid/component-cell-renderer/

Using one of the predefined cell renderer components it is working properly. Also with another approach (instead of class, using string and registering it) the outcome is the same.

The function approach would work but is not enough for the things I have to do.

Does anybody have a clue how to get the component to work?


Solution

  • Found the solution. Problem that I used the cellRenderer. With the cellRendererFramework instead, it is working properly.

    {
        headerName: 'Market Retail Price',
        field: 'price',
        width: 160,
        editable: true,
        cellEditorFramework: NumericEditorComponent,
        cellRendererFramework: WarningRendererComponent,
        valueGetter: (params: any) => params.data.price || params.data.oprice,
        valueFormatter: (params: any) => this.numberFormatter(params.data.total_discount)
    }