[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 your through the process of passing an Observable into a Component.

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

// clock.ts  from'angular2/core'; @Component ({    '  Clock',    Template: ''ymmmmeeeedjms '}} 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>         `}) ExportclassApp {click$=NewSubject (). Map ((number)=({type:hour, payload:parseint (number)})); seconds$= Observable.interval ( +). 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.tsExportConstSECOND ="SECOND"; exportConstHOUR ="HOUR"; exportConstClock = (state =NewDate (), {type, payload}) = = {    ConstDate =NewDate (State.gettime ()); Switch(type) { CaseSECOND:date.setSeconds (date.getseconds ()+payload); returndate;  CaseHOUR:date.setHours (date.gethours ()+payload); returndate; }    returnState ;};

//main.tsImport {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**/

[Angular 2] passing observables into the components with Async Pipe