[Angular 2] Handling Click Events with Subjects

While Angular 2 usually uses event handlers to manage events and RxJS typically uses Observable.fromEvent, a good practice when using Angular 2 and RxJS combined is to use Subjects and push the value through each event so that you can use it as part of your stream.

 

import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
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();
    public clock;
    constructor(){
        this.clock = this.click$.map( () => new Date());
    }
}

bootstrap(App);

 

So here create a click$ subject, every time you click the button, it will map to a current date value.