Change date format in Angular-CodePudding

I am working on angular application and I have an array as follows:

data:

[
 {
   "id:"1",
   "date":"2021-06-28T00:00:00.00Z",
   "name":"A"
 },
  {
   "id:"2",
   "date":"2022-06-28T00:00:00.00Z",
   "name":"A"
 },
  {
   "id:"3",
   "date":"2023-06-28T00:00:00.00Z",
   "name":"A"
 }
]

Like this I may have 100-200 records in array. In my html I have code as follows:

<div *ngFor="let data of data">
{{data.date}}
</div>

I want to disaply date in following format: "June22", "Nov23" etc. How can I convert date to required format at runtime?

CodePudding user response：

With the built-in date pipe:

<div *ngFor="let data of data">
{{data.date | date: 'MMMYY'}}
</div>

https://angular.io/api/common/DatePipe

CodePudding user response：

I'm not an Angular seasoned developer but I have achieved what you are asking using 'Pipes'. Here is the link to Transforming Data Using Pipes. Specifically, you may find it handy to use a DatePipe.

For instance: (taken from the link above)

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p>

I think you may be looking for something like:

'mediumDate'    'MMM d, y'  Jun 15, 2015

Take a look at the first link I have provided. I hope this may help you.