[Angular 2] Passing Observables into Components with Async Pipe

// clock.ts


import {Component, Input} from ‘angular2/core‘;
@Component({
    selector: ‘clock‘,
    template: `<h3>{{time | date:‘yMMMMEEEEdjms‘}}</h3>`
})

export class ClockComponent{
    @Input() time;
    constructor(){
        
    }
}

// app.ts

/**
 * Created by wanzhen on 26.4.2016.
 */
import {Component} from ‘angular2/core‘;
import {Observable} from ‘rxjs/Observable‘;
import ‘rxjs/add/observable/interval‘;
import ‘rxjs/add/operator/map‘;
import ‘rxjs/add/observable/merge‘;
import ‘rxjs/add/operator/startWith‘;
import ‘rxjs/add/operator/scan‘;
import ‘rxjs/add/operator/mapTo‘;
import {Subject} from "rxjs/Subject";
import {Store} from ‘@ngrx/store‘;
import {SECOND, HOUR} from ‘./reducer‘;
import {ClockComponent} from ‘./clock‘;

@Component({
    selector: ‘app‘,
    directives: [ClockComponent],
    template: `
        <input #inputNum type="number" value="0">
        <button (click)="click$.next(inputNum.value)">Update</button>
        <clock [time]="time | async"></clock> 
        `
})
export class App {
    click$ = new Subject()
            .map( (number) => ({type: HOUR, payload: parseInt(number)}));

    seconds$ = Observable.interval(1000)
        .mapTo({type: SECOND, payload: 1});

    time;

    constructor(store:Store) {
        this.time = store.select(‘clock‘);


        Observable.merge(
            this.click$,
            this.seconds$
            )
            .subscribe(store.dispatch.bind(store))
    }
}

// reducer.ts

export const SECOND = "SECOND";
export const HOUR = "HOUR";

export const clock = (state = new Date(), {type, payload})=> {
    const date = new Date(state.getTime());
    switch(type){
        case SECOND:
            date.setSeconds(date.getSeconds() + payload);
            return date;

        case HOUR:
            date.setHours(date.getHours() + payload);
            return date;

    }

    return state;
};

// main.ts

import {bootstrap} from ‘angular2/platform/browser‘;
import {App} from ‘./app‘;
import {provideStore} from ‘@ngrx/store‘;
import {clock} from ‘./reducer‘;

bootstrap(App, [
    provideStore({clock})
]).then(
    ()=> console.log(‘App running...‘),
    err=> console.log(err)
);

/*
*  1. Create a reducer
*  2. Use provideStore({reducer_name}) to provide store
*  3. Use store.select(‘reducer_name‘) to get store in Observable type
*  4. Apply logic to dispatch the action
* */