Наблюдается из события щелчка ‹button› в Angular2

Вы можете использовать Observable.fromEvent, как описано в Angular2 RxJS получает ошибку Observable_1.Observable.fromEvent is not a function

Или просто вперед к наблюдаемому как

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

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

or

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

Не зацикливайтесь на этом.

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

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

Пример @Gunter у меня не совсем сработал, потому что мой компилятор не распознал publ.

Вот пример того, что у меня сработало: 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);
    }
}

Внутри modal.component.html:

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

Если вы попытаетесь использовать @ViewChild, а ваша кнопка не отображается на странице во время инициализации (из-за * ngIf), то присвоение будет нулевым.

Вы можете использовать сеттер вместе с @ViewChild и запускать инициализацию при первом появлении кнопки.

@ViewChild('btnAdd')
set btnAdd(btnAdd: Button) { ... } 

Это быстро становится неуклюжим и неудобным, особенно если из этого вы создаете наблюдаемый поток.

Гибридный способ может быть следующим:

btnAskAnotherClicks$ = new Subject<Event>();

<button mat-flat-button (click)="btnAskAnotherClicks$.next($event)">Ask another question...</button>

Это позволяет вам использовать поток кликов для создания цепочек, но без проблем, если кнопка изначально скрыта из-за * ngIf.

Не нравится next в вашем шаблоне? Я тоже не особо. Но я согласен с async, и это детали реализации. Ну это вам решать -)

Для тех, кто использует кнопки AngularMaterial и конвейерные операторы RxJS, несколько небольших модификаций для ответа @JoshuaDavid:

Некоторая кнопка в шаблоне, помеченная переменной шаблона:

<button #btnTemplateName mat-icon-button></button>

Код компонента:

import { Observable, fromEvent } from 'rxjs';

// Note importing from lettable/pipeable operators - 'operators' plural
import { tap } from 'rxjs/operators';

import { MatButton } from '@angular/material/button';

//Access the button through the template variable, typed to MatButton
@ViewChild('btnTemplateName') myBtn: MatButton;
myBtnClicks$: Observable<any>;


ngAfterViewInit() {

    // Note the need to access the native element in MatButton through the extended property chain
    this.myBtnClicks$ = 
      Observable.fromEvent(this.myBtn._elementRef.nativeElement, 'click');

    // Can now subscribe (using lettable/pipeable operators)
    this.myBtnClicks$.pipe(
       tap(() => console.log("Button clicked")),
    )
    .subscribe(event => console.log("Event:" + JSON.stringify(event)));
}