How does this big arrow notation work with ag-Grid value formatter?

Question

I've created a service GridFormatterService in an angular project which contains static methods to use for value formatting within ag-Grid.

In some of the ag-Grids within the project, I need to pass a parameter displayDateAndTime (a boolean flag) from the column definition valueFormatter to my service to decide in what way the value will be formatted.

Doing this in the normal way, e.g -

public columnDefs = {
    ... , valueFormatter: GridFormatterService.dateFormatter(params, displayDateAndTime), ...
}

Doesn't work. I found an answer here that solves this problem, so I implemented it in dateFormatter like so:

public static dateFormatter(displayDateAndTime: boolean = false) {
    return (params: ValueFormatterParams) => { 
      if (params.value) { 
        if (!displayDateAndTime) { 
          return new Date(params.value).toLocaleDateString('en-GB');
        } else { 
          return moment(params.value).format('DD/MM/YYYY HH:mm');
        }
      }
    }
  }

However, this implementation only works when the displayDateAndTime parameter is passed in. The parameter only needs to be passed in certain cases, and when you don't pass in a parameter (even if you set a default or allow it to be null), it breaks dateFormatter and causes the code, as a string, to be displayed in the ag-Grid. In this case, what I see displayed in the grid is params => if (params.value)...

My questions are twofold:

1. How does this big arrow notation allow the function to access params from ag-Grid, even though it's not passed in to the function?
2. How can I allow dateFormatter to have a default value for my flag without breaking the ag-Grid, and if I can't, is there another way of passing a parameter to valueFormatter that I'm missing?

Thanks for your help!

Answer 1

This is how I would do it. Tested it, and it works.

columnDefs = [
...
    {
      field: 'someField',
      valueFormatter: (params: ValueFormatterParams) =>
        GridFormatterService.dateFormatter(params, true),
    },
    {
      field: 'otherField',
      valueFormatter: (params: ValueFormatterParams) =>
        GridFormatterService.dateFormatter(params),
    },
...
]

here is the Service below. Please note to tell typescript that a property may or may not exist, you have to use a question mark.

ie function(a: params, b?: boolean)

    class GridFormatterService {
...
      public static dateFormatter(
        params: ValueFormatterParams,
        displayDateAndTime?: boolean
      ) {
        if (params.value) {
          if (!displayDateAndTime) {
            return 'Format A';
          } else {
            return 'Format B';
          }
        }
      }
...
    }

Here is a link to a working example: https://stackblitz.com/edit/angular-ag-grid-formatter?file=src%2Fapp%2Fapp.component.ts