ReferenceError: customValueFormatter is not defined ag grid angular

Question

I am having column definitions in a separate JSON file and I am trying to add value formatter to one of my field and I am defining the value formatter function in component file but I am getting this error "Exception = ReferenceError: customValueFormatter is not defined"

This is column definition JSON

[
  {
    "field": "parent",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "set",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "child",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "Item",
    "rowGroup": true,
    "cellRenderer": "toolTipComponent",
    "flex": 1
  },
  {
    "field": "factName",
    "pivot": true
  },
  {
    "headerName": "Value",
    "field": "value",
    "valueFormatter": "customValueFormatter",
    "cellRenderer": "labelComponent",
    "aggFunc": "customAggregateFunction",
    "flex": "1",
    "wrapText": true,
    "autoHeight": true
  }
]

and this my component file

import { Component, Input, OnInit } from '@angular/core';
import { RightsScreenHttpService } from './services/rights-screen-http.service';
import { MatSnackBar } from '@angular/material/snack-bar';
import { SnackBarComponent } from '../../shared/snack-bar/snack-bar.component';
import { ToolTipComponent } from '../tool-tip/tool-tip.component';
import { LabelComponent } from '../../shared/label-generator';

const rightColumnDefs = require('../../../assets/rightsHeaderNames.json');

@Component({
  selector: 'app-rights-screen',
  templateUrl: './rights-screen.component.html',
  styleUrls: ['./rights-screen.component.scss']
})
export class RightsScreenComponent implements OnInit {
  gridApi: any;
  gridColumnApi: any;
  columnDefs: any[];
  defaultColDef: any;
  autoGroupColumnDef: any;
  rowData: any = [];
  isLoading: boolean;
  @Input() data: any;
  type: string;
  frameworkComponents: {
    toolTipComponent: any;
    labelComponent: any;
  };
  aggFuncs: any;
  getRowStyle: any;
  isRowDataEmpty: boolean;
  dummyColumnDefs: any;
  constructor(private _rightsService: RightsScreenHttpService, private _snakBar: MatSnackBar) {
    this.columnDefs = rightColumnDefs;
    this.dummyColumnDefs = rightsDummyHeaderNames;
    this.defaultColDef = {
      filter: true,
      resizable: true
    };
    this.autoGroupColumnDef = {
      minWidth: 280,
      cellRendererParams: {
        suppressCount: true
      }
    };
    this.frameworkComponents = {
      toolTipComponent: ToolTipComponent,
      labelComponent: LabelComponent
    };
  }

  ngOnInit() {
   
  }

  onGridReady(evt) {
    this.gridApi = evt.api;
    this.gridColumnApi = evt.columnApi;
    this.defaultColDef = { resizable: true };
    if (this.rowData.length === 0) {
      this.isRowDataEmpty = true;
    }
  }

  customValueFormatter(params){
    if (params.node.field === 'contentsetItem') {
      let childrenValues = [];
      let pivotKeys = params.colDef.pivotKeys;
      console.log(pivotKeys);
    }
  }

  onCellClicked(evt) {}

  onSelectionChanged(evt) {}

}

Could anyone please tell me where I am making the mistake

Answer 1

The "valueFormatter": "customValueFormatter" entry in the JSON file only assigns the string customValueFormatter to the valueFormatter property. It doesn't assign the function customValueFormatter(params) like you may want it to.

To do it you'd have to extend the object from the JSON file locally in the component.

this.columnDefs = rightColumnDefs.map(col => 
  ({ ...col, valueFormatter: (params) => this.customValueFormatter(params) })
);

Of course this would add the formatter to each object of the array. You could use the ternary operator to add the formatter conditionally to select few objects of the array.

this.columnDefs = rightColumnDefs.map(col => 
  // example (add formatter based on the `field` property)
  col['field'] === 'value'   
    ? ({ ...col, valueFormatter: (params) => this.customValueFormatter(params) })
    : col
);