Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the clock to change.
/** * 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'; @Component({ selector: 'app', template: ` <input #inputNum type="number" value="0"> <button (click)="click$.next(inputNum.value)">Update</button> <h1>{{clock | async | date:'yMMMMEEEEdjms'}}</h1> ` }) export class App { click$ = new Subject() .map( (number) => ({type: HOUR, payload: parseInt(number)})); seconds$ = Observable.interval(1000) .mapTo({type: SECOND, payload: 1}); clock; constructor(store:Store) { this.clock = store.select('clock'); Observable.merge( this.click$, this.seconds$ ) .subscribe((action)=>{ store.dispatch(action) }) } }