[Angular 2] Handling Clicks and Intervals Together with Merge
Observable.merge allows you take two different source streams and use either one of them to make changes to the same state of your data. This lesson shows how you can use a stream of clicks and an interval stream and use either one to update the clock.
import {Component} from 'angular2/core'; import {bootstrap} from 'angular2/platform/browser'; import {Observable} from 'rxjs/Observable'; import 'rxjs/add/observable/interval'; import 'rxjs/add/observable/merge'; import 'rxjs/add/operator/map'; import {Subject} from 'rxjs/Subject'; @Component({ selector: 'app', template: ` <button (click)="click$.next()">Update</button> <h1>{{clock | async | date: 'yMMMMEEEEdjms'}}</h1> ` }) class App { click$ = new Subject(); clock; constructor(){ this.clock = Observable.merge( Observable.interval(5000), this.click$ ).map( () => new Date()); } } bootstrap(App);
So the logic is both
- every 5 seconds to update the clock
- when click the button to update the clock
SO there use logic "OR" --> merge() to do that