Angular 2 Pipe ShortDate on NGX Data Table

Question

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>

Answer 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