Conditionally formatting dates in Angular

Question

I have a property that I am displaying on an angular template which may or may not be a date. If it is a date, I would like to format it but if it's not, I just want to show the value.

This is what I have tried based on researching and it only worked for dates, for everything else it was blank:

<td>{{key | date: 'MM/dd/yyyy' || key}}</td>

I could add a Boolean property:

<td *ngIf="isDate">{{key | date: 'MM/dd/yyyy'}}</td>
<td *ngIf="!isDate">{{key}}</td>

but is there a way to do this directly in the template?

The first solution you have posted seems to be working. Do you want something else? — Martino Lessio, Oct 17 '17 at 14:01
https://stackoverflow.com/questions/36928435/angular-2-pipe-under-condition — Z. Bagley, Oct 17 '17 at 14:03
@MartinoLessio The first solution is not working if the key is not a date — cooper, Oct 17 '17 at 14:31
on the 2nd condition you need to add another test key | date: 'MM/dd/yyyy' || (key && !date or something similar) as no matter what the key is it will always be true and will show up — Asif Karim Bherani, Oct 17 '17 at 14:42
https://stackoverflow.com/questions/643782/how-to-check-whether-an-object-is-a-date — Z. Bagley, Oct 17 '17 at 14:45
@cooper are you sure? please look at this working fiddle: http://jsfiddle.net/mlessio/dbLk9ab4/ — Martino Lessio, Oct 18 '17 at 14:20

score 0 · Answer 1 · answered Oct 17 '17 at 19:33

0

You would need to check the value on the typescript side first to see (for example) if the value contains a "/" and set another variable to true or false if it is indeed a date or not.

answered Oct 17 '17 at 19:33

Andrew Howard

2,818
5
33
59

Conditionally formatting dates in Angular

1 Answers1