How to format datetime in angular2?

Question

My server returns the json as follows,

[{"_id":"5890b47a6166c457ffdee2ba","description":"Imagine Dragons","name":"Imagine Dragons","place":{"name":"The Fox Theater at Foxwoods Resort Casino","location":{"city":"Mashantucket","country":"United States","latitude":41.448925,"longitude":-71.9757,"state":"CT","street":"39 Norwich Westerly Road","zip":"06338"},"id":"705089749524546","_id":"5890b4956166c457ffdee46b"},"start_time":"2015-12-31T22:00:00-0500","id":"332858933549715"},{"_id":"5890b47a6166c457ffdee2bb","description":"Capital One Beach Bash: Free Orange Bowl concert on South Beach","name":"Imagine Dragons: Orange Bowl","place":{"name":"Lummus Park, Miami Beach","location":{"city":"Miami","country":"United States","latitude":25.7804,"longitude":-80.1299,"state":"FL","zip":"33139"},"id":"166795223482547","_id":"5890b4956166c457ffdee46c"},"start_time":"2015-12-30T19:00:00-0500","id":"730714023727940"}]

i am assigning the response to an Array named events,

search (term: string) {
          this.eventService.getEventService().subscribe(events  => {
                console.log(events);
                this.events = events;
            }, error => this.errorMessage = error);
}

and i bind it as follows,

<li *ngFor="let event of events | slice:0:4;let i=index" >    
  <span class="tab-content-area-active-location">          
   {{event.name}}
  </span>
 <span class="tab-content-area-active-location">          
   {{event.start_time}}
    </span>
  **</li>  

Current Output:**

Avril Lavigne in Sapporo, Japan 2016-12-19T00:00:00+0900

Expected Output:

  Avril Lavigne in Sapporo Saturday, December 3, 2016, Camp Nou, Barcelona

Answer 1

you can use Pipes to format date

{{event.start_time | date : 'date_format'}}

https://angular.io/docs/ts/latest/api/common/index/DatePipe-pipe.html

Predefined date formats in angular

https://angular.io/api/common/DatePipe#pre-defined-format-options