Observable from <button> click event in Angular2

Question

What's the preferred way to create an observable from a button's onclick event using Angular 2?

I'm not sure if it's considered best practice to grab the native element from the DOM in the component code (how do I do this?), or if there's some other shortcut I don't know about.

Answer 1

Don't overthink it.

@ViewChild('button') button;
clicks$:Observable<any>;

ngOnInit() {
  this.clicks$ = Observable.fromEvent(this.button.nativeElement, 'click');
}

Answer 2

You can use Observable.fromEvent like explained in Angular2 RxJS getting 'Observable_1.Observable.fromEvent is not a function' error

Or just forward to an observable like

private obs = new Subject();
public obs$ = this.obs.asObservable();

@HostListener('click', ['$event']) 
clickHandler(event){
  this.obs.next(event);
}

or

<button (click)="obs.next($event)">

Answer 3

@Gunter's example didn't quite work for me, because my compiler didn't recognize publ.

Here's an example of what worked for me: modal.component.ts

import { Output, Component } from '@angular/core';
import {Subject} from "rxjs/Subject";

export class MyModal{

    private clickStream = new Subject<Event>();

    @Output() observ = this.clickStream.asObservable();

    buttonClick(event:Event){
        this.clickStream.next(event);
    }
}

Inside modal.component.html:

<button type="button" class="btn btn-default" (click)="buttonClick($event)">click me</button>