In this example we will implement Angular date pipe in two steps
- Make new instance of DatePipe
const datePipe = new DatePipe('en') - Use datePipe to transform date: datePipe.transform(date,'dd-MM-yyyy')
Actually there are couple more different ways which you can read in this post.
To make example from above even more simpler, we can use DatePipe in just one line of code:
const formatDate = new DatePipe('en').transform(myDate, 'dd-MM-yyyy');
If you just want to format the date in angular regardless of using pipe or something else, there is a method formatDate() provided by the framework which you can use as well:
formatDate(data.created_at, 'shortDate', 'en')
As you can see here we are using 'shortDate' as format which will output date as M/d/yy
Here is full list of predefined date format options
|
<b>Filter</b>
|
<b>Output</b>
|
<b>Example</b>
|
|
'short'
|
'M/d/yy, h:mm a'
|
6/15/15, 9:03 AM
|
|
'medium'
|
'MMM d, y, h:mm:ss a'
|
Jun 15, 2015, 9:03:01 AM
|
|
'long'
|
'MMMM d, y, h:mm:ss a z'
|
June 15, 2015 at 9:03:01 AM GMT+1
|
|
'full'
|
'EEEE, MMMM d, y, h:mm:ss a zzzz'
|
Monday, June 15, 2015 at 9:03:01 AM GMT+01:00
|
|
'shortDate'
|
'M/d/yy'
|
23/12/20
|
|
'mediumDate'
|
'MMM d, y'
|
Jun 15, 2015
|
|
'longDate'
|
'MMMM d, y'
|
June 15, 2015
|
|
'fullDate'
|
'EEEE, MMMM d, y'
|
Monday, June 15, 2015
|
|
'shortTime'
|
'h:mm a'
|
9:03 AM
|
|
'longTime'
|
'h:mm:ss a z'
|
9:03:01 AM GMT+1
|
|
'fullTime'
|
'h:mm:ss a zzzz'
|
9:03:01 AM GMT+01:00
|
|
'mediumTime'
|
'h:mm:ss a'
|
9:03:01 AM
|
* source: official angular documentation
Another example of using angular pipe in component would be using LowerCasePipe()
const lowercaseText = new LowerCasePipe();
const myText = lowercaseText.transform(MyUppercaseText);
https://angular.io/guide/pipes
