Angular ag grid valueFormatter is not working

Question

I am having this in my app.component.ts

numberFormatter(params:number) : String {
    return params.toFixed(3).toString();
  }

columnDefs = [
   {headerName: 'Month', field: 'month', valueFormatter: this.numberFormatter, },
   {headerName: 'Values', field: 'value', valueFormatter: this.numberFormatter, }, 
]

rowData: any[] = [
{ month: 0, value: 5 + (Math.random( ) - 0.5) * 2 },
{ month: 1, value: 5 + (Math.random( ) - 0.5) * 2 },
{ month: 2, value: 5 + (Math.random( ) - 0.5) * 2 },
...
]

In my app.component.html:

<div>
    <ag-grid-angular
        [rowData]="rowData" 
        [columnDefs]="columnDefs">
    </ag-grid-angular>
</div>

All I get is the error: error TS2322: Type '{ headerName: string; field: string; valueFormatter: (params: any) => String; }[]' is not assignable to type '(ColDef | ColGroupDef)[]'.

I tried to change numberFormatter to:

  numberFormatter(params:any) : String {
    return Number(params).toFixed(3).toString();
  }

It does not work either.

Answer 1

Use params.value Instead of params

Example

function bracketsFormatter(params: ValueFormatterParams) {
  return '(' + params.value + ')';
}