[Angular 2] Passing Observables into Components with Async Pipe

The components inside of your container components can easily accept Observables. You simply define your custom @Input then use the Async pipe when you pass the Observable in. This lesson walks you through the process of passing an Observable into a Component.

 

The idea is Your smart component prepares the data and use 'async pipe' to pass into the dumb component to display. So the dump component has no idea about Observable. Just need to display the data.

 

// 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))
    }
}

Here using 'store.dipatch.bind(store)' instead of 'function(action){store.dispatch(action)}'.

 

// 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
* */