My date looks like this:
2000-12-16T00:00:00
When displayed in Material code (as the publish_date):
<mat-card *ngFor="let book of bookItems">
<mat-card-header >
<mat-card-title>{{book.title | titlecase}}</mat-card-title>
<mat-card-subtitle>{{book.description}}</mat-card-subtitle>
<mat-card-subtitle>{{book.author}}</mat-card-subtitle>
<mat-card-subtitle>{{book.genre}}</mat-card-subtitle>
<mat-card-subtitle>{{book.publish_date}}</mat-card-subtitle>
<mat-card-subtitle>{{book.price}}</mat-card-subtitle>
</mat-card-header>
</mat-card>
How can I make the date more human-friendly?
The date is extracted from an XML file as shown below:
<book id="B1">
<author>Kutner, Joe</author>
<title>Deploying with JRuby</title>
<genre>Computer</genre>
<price>33.00</price>
<publish_date>2012-08-15</publish_date>
<description>Deploying with JRuby is the missing link between enjoying JRuby and using it in the real world to build high-performance, scalable applications.</description>
</book>
This data is fetched in the following way:
[HttpGet]
public IActionResult GetBookItems()
{
List<BookItem> BookItems = new List<BookItem>();
XDocument doc = _db.GetXmlDb();
List<BookItem> bookitems = doc.Descendants("book").Select(x => new BookItem()
{
Id = (string)x.Attribute("id"),
Author = (string)x.Element("author"),
Title = (string)x.Element("title"),
Genre = (string)x.Element("genre"),
Price = (decimal)x.Element("price"),
Publish_date = (DateTime)x.Element("publish_date"),
Description = (string)x.Element("description")
}).ToList();
return Ok(bookitems);
}
This CRUD call is made from the Angular app to the ASP.NET Controller.
How can I enhance the display of the bookItem in the Angular app?
Here is the book interface used in the Angular app:
export interface BookItem
{
id: string;
author: string;
title: string;
genre: string;
price: string;
publish_date: string;
description: string;
}