6

I have a mat-table which displays columns Date, Before Time Period and After Time Period. Code for HTML :- 

<ng-container
            matColumnDef="{{ column }}"
            *ngFor="let column of columnsToDisplay"
        >
            <th mat-header-cell *matHeaderCellDef>{{ column }}</th>
            <td mat-cell *matCellDef="let element">
                {{ element[column]  }}
            </td>
        </ng-container>

TypeScript Code: 

columnsToDisplay = [
    'executionDate',
    'previousTimePeriod',
    'afterTimePeriod'
];
executionDate: string = new Date().toISOString().slice(0, 10);

If I use a pipe {{ element[column] | date: 'yyyy-MM-dd'}} to display Date of type string to date type then I am not able to see Before and After Time Period. How can I view date only as 'yyyy-MM-dd'

Cpt Kitkat
  • 1,392
  • 4
  • 31
  • 50
  • Please provide some sample data to work with. Also, it would be really helpful if you could provide a sample stackblitz replicating your issue. – SiddAjmera Feb 12 '19 at 07:45

3 Answers3

4

create a pipe:

import { Pipe, PipeTransform } from '@angular/core';
import * as moment from 'moment';

@Pipe({
  name: 'momentPipe',
  pure: false
})
export class MomentPipe implements PipeTransform {

  constructor() { }

  transform(value: string, dateFormat: string): any {
        return moment(value).format(dateFormat);
    }
}

then in html:

<span >{{ element[column] | momentPipe: 'dddd D MMM YYYY' }}</span>

You need moment for this approach see here more formats

Radu Tataru
  • 49
  • 5
1

My suggestion is to use angular momentjs

So it'll be simple that you can use its filter as

{{ element[column] | amParse: 'YYYY-MM-DDTHH:mm:ss.SSSSZ' | amDateFormat: 'yyyy-MM-dd' }}
Nguyen Phong Thien
  • 3,237
  • 1
  • 15
  • 36
0

Another idea is you can convert your string-date into 'yyyy-MM-dd' format and replace with replacing with string-date.

This link should help you.

Dhaval
  • 868
  • 12
  • 22