[Angular 2] Rendering an Observable Date with the Async and Date Pipes

Instead of simply pushing numbers on a timer into the template, now we'll move on to pushing actual Dates. We'll still use the Async pipe, but we'll also add on the Date pipe with some formatting to display the Date just the way we want it.

 

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app',
    template: `<h1>{{clock | async | date: 'yMMMMEEEEdjms'}}</h1>`
})

class App {
    clock = Observable.interval(1000)
        .map( () => new Date());
}

bootstrap(App);

 

Monday, April 25, 2016, 10:16:50 PM