Angular 2 Pipe ShortDate on NGX Data Table
Solution 1
You can just use date pipe
to format value.
{{value | date:'shortDate'}}
is equivalent to {{value | date:'ymd'}}
which outputs date like following: 22/08/2017
Solution 2
constructor(
private fb: FormBuilder,
private _currencyPipe: CurrencyPipe,
private _datePipe: DatePipe
) {
this.rows = [
{from: Date().toString(), to: Date(), amount: 100, verified: false},
{from: Date(), to: Date(), amount: 100, verified: true},
];
}
ngOnInit() {
this.columns = [
{ name: 'FROM', prop: 'from', pipe: this.datePipe()},
{ name: 'TO', prop: 'to', pipe: this.datePipe()},
{ name: 'AMOUNT', prop: 'amount', width: 85, pipe: this._currencyPipe},
{ name: 'CONFIRM | DELETE', cellTemplate: this.editCell, width: 155}
];
this.buildForm();
}
datePipe () {
return {transform: (value) => this._datePipe.transform(value, 'MM/dd/yyyy')};
}
You can always use the programatic aproach to applying pipes, infact you could create custom pipes with this aproach.
The pipe @Input
in the ngx-dataTable expects a Pipelike structure with a transform: Function. you could make any function that returns a transform function and manipulate data as you please.
Solution 3
Hope this will help you
<ng-template #dateColumn let-row="row" let-value="value" let-i="index">
{{value | date:'dd-MM-yyyy'}}
</ng-template>
export class CvbankListComponent implements OnInit {
@ViewChild('dateColumn') dateColumn: TemplateRef<any>;
.
.
.
this.columns = [
.
.
{ name: 'Date', prop: 'Date', cellTemplate: this.dateColumn },
];
Solution 4
Your HTML is wrong. It should be as shown below.
<ngx-datatable
[rows]="toDos"
[columns]="columns">
<ngx-datatable-column name="dueDate">
<ng-template let-row="row" ngx-datatable-cell-template>
{{row.dueDate | date:'shortDate'}}
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
Please find the example code for this here: https://github.com/swimlane/ngx-datatable/blob/master/demo/sorting/sorting-default.component.ts
The live example of this: http://swimlane.github.io/ngx-datatable/
Solution 5
I thought this way of using the pipe
property on the columns config was very clean (not sure if Angular 2 will be able to handle this like the OP asked, but Angular 10 can)
class DateOnlyPipe extends DatePipe {
public transform(value): any {
return super.transform(value, 'MM/dd/y');
}
}
const columns = [{
name: 'Date',
prop: 'dateReported',
pipe: new DateOnlyPipe('en-US')
}];
source: https://github.com/swimlane/ngx-datatable/issues/401#issuecomment-311635384
![Greg Finzer](https://i.stack.imgur.com/F5JWS.jpg?s=256&g=1)
Greg Finzer
I am the owner of Kellerman Software. I have several open source and commercial products. Visit http://www.kellermansoftware.com Free Quick Reference Pack for Developers Free Sharp Zip Wrapper NUnit Test Generator (also generates xUnit and MS Test stubs) .NET Caching Library .NET Email Validation Library .NET FTP Library .NET Encryption Library .NET Logging Library Themed Winform Wizard Unused Stored Procedures AccessDiff (Compare Access object and data differences) .NET SFTP Library Ninja Database Pro (Object database for .NET, Silverlight, Windows Phone 7) Ninja WinRT Database (Object database for Windows Runtime) Knight Data Access Layer (ORM, LINQ Provider, Generator for SQL Server, Oracle, MySQL, Firebird, MS Access, VistaDB) Here is my open source project: https://github.com/GregFinzer/Compare-Net-Objects
Updated on June 12, 2022Comments
-
Greg Finzer about 2 years
I would like to format a date column as a short date in Angular 2 NGX Datatable.
Here is the HTML:
<ngx-datatable [rows]="toDos" [columns]="columns"> </ngx-datatable>
Here is the component TypeScript
import { Component, OnInit } from '@angular/core'; import { IToDo } from '../shared/todo'; import { ToDoService } from '../shared/todo.service'; @Component({ selector: 'app-todo-list', templateUrl: './todo-list.component.html', styleUrls: ['./todo-list.component.css'] }) export class TodoListComponent implements OnInit { toDos: IToDo[]; columns = [ { prop: 'toDoId' }, { name: 'To Do', prop: 'name' }, { prop: 'priority' }, { prop: 'dueDate' }, { prop: 'completed' } ]; constructor(private _toDoService: ToDoService) { } ngOnInit() { this.toDos = this._toDoService.getToDos(); } }
I have tried this in the HTML but it gives a template parse error:
<ngx-datatable [rows]="toDos" [columns]="columns" <ngx-datatable-column prop="dueDate"> <ng-template let-value="value" ngx-datatable-cell-template> {{value | date[:shortDate]}} </ng-template> </ngx-datatable-column> > </ngx-datatable>