Not able to format date in ag grid with angular date pie

Question

I am using ag-grid with angular 8. In my table I have a column where I want to display dates in short format, so I used Angular date pipe for this but it's not working. here is the code and the error below.

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html',
  styleUrls: ['./sample.component.css']
})
export class SampleComponent implements OnInit {

  @ViewChild('agGrid', {static: true}) agGrid: AgGridAngular;

  rowData: Bidon[] = [];
  columnDefs = [
    {headerName: 'PostId', field: 'postId', sortable: true, filter: true, checkboxSelection: true},
    {headerName: 'Id', field: 'id', sortable: true, filter: true},
    {headerName: 'Name', field: 'name', sortable: true, filter: true},
    {headerName: 'Email', field: 'email', sortable: true, filter: true},
    {headerName: 'Body', field: 'body', sortable: true, filter: true},
    {headerName: 'Date Bidon 1', field: 'dateBindon1', sortable: true, filter: true, valueFormatter: this.datePipeFormatter},
    {headerName: 'Date bidon 2', field: 'dateBidon2', sortable: true, filter: true},
    {headerName: 'Price', field: 'price', sortable: true, filter: true, valueFormatter: this.currencyFormatter}
  ];

  constructor(private bidonService: BidonService, private datePipe: DatePipe) {
  }

  ngOnInit() {
    this.rowData = this.bidonService.bidons;
    console.log(this.datePipe.transform(new Date(), 'short'));
  }

  getSelectedRows() {
    const selectedNodes = this.agGrid.api.getSelectedNodes();
    const selectedData = selectedNodes.map(node => node.data);
    const selectedDataStringPresentation = selectedData.map(node => 'Name: ' + node.name + ' Email: ' + node.email).join(', ');

    console.log(`Selected nodes: ${selectedDataStringPresentation}`);
  }

  currencyFormatter(params) {

    console.log(params);
    return params.value + '$';
  }

  datePipeFormatter(params) {

    return this.datePipe.transform(params.value, 'short');
  }

}

enter image description here

Answer 1

The issue with your code is related to the valueFormatter function you defined for the Date Bidon 1 column in the columnDefs array. You are passing this.datePipeFormatter as the value formatter, but the this keyword inside the function refers to the function itself, not the component instance, so the datePipe service is not available.

To fix this, you can use an arrow function for the datePipeFormatter function, which will preserve the this context of the component instance. Here's how you can modify the code:

{headerName: 'Date Bidon 1', field: 'dateBindon1', sortable: true, filter: true, valueFormatter: (params) => this.datePipeFormatter(params)},

This should fix the issue with the date pipe not working. Note that you should also import the DatePipe in your component:

import { Component, OnInit, ViewChild } from '@angular/core';
import { AgGridAngular } from 'ag-grid-angular';
import { Bidon } from '../bidon';
import { BidonService } from '../bidon.service';
import { DatePipe } from '@angular/common';
...

And make sure that it's included in the providers array of your module:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [DatePipe], // <-- add DatePipe here
  bootstrap: [AppComponent]
})
export class AppModule { }

With these modifications, the date should be formatted correctly using the short format.

if you found any issue then comment here I will try to resolve those issues also.

Answer 2

Since your valueFormatter is called by ag-grid, you lose the this context and you have to bind it.

Using bind:

columnDefs = [
    {headerName: 'PostId', field: 'postId', sortable: true, filter: true, checkboxSelection: true},
    {headerName: 'Id', field: 'id', sortable: true, filter: true},
    {headerName: 'Name', field: 'name', sortable: true, filter: true},
    {headerName: 'Email', field: 'email', sortable: true, filter: true},
    {headerName: 'Body', field: 'body', sortable: true, filter: true},
    {headerName: 'Date Bidon 1', field: 'dateBindon1', sortable: true, filter: true, valueFormatter: this.datePipeFormatter.bind(this)},
    {headerName: 'Date bidon 2', field: 'dateBidon2', sortable: true, filter: true},
    {headerName: 'Price', field: 'price', sortable: true, filter: true, valueFormatter: this.currencyFormatter.bind(this)}
  ];

Or using arrow function:

columnDefs = [
    {headerName: 'PostId', field: 'postId', sortable: true, filter: true, checkboxSelection: true},
    {headerName: 'Id', field: 'id', sortable: true, filter: true},
    {headerName: 'Name', field: 'name', sortable: true, filter: true},
    {headerName: 'Email', field: 'email', sortable: true, filter: true},
    {headerName: 'Body', field: 'body', sortable: true, filter: true},
    {headerName: 'Date Bidon 1', field: 'dateBindon1', sortable: true, filter: true, valueFormatter: p => this.currencyFormatter(p)},
    {headerName: 'Date bidon 2', field: 'dateBidon2', sortable: true, filter: true},
    {headerName: 'Price', field: 'price', sortable: true, filter: true, valueFormatter: p => this.currencyFormatter(p)}
  ];