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