[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.