Currently, I am utilizing ag-grid in conjunction with Angular 8. Within my table, there is a column where my intention is to exhibit dates in a concise format. In order to achieve this, I opted to utilize the Angular date pipe. However, it appears that the implementation is encountering issues. The code snippet and error message are provided 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