[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