Angular 4 - Converting events to observable streams

Question

I'm fairly new to Rxjs and Angular 4 and can't get my head around how to do this.

Template:

<div class="btn-group cp">
   <input [colorPicker]="bgColor" 
   (colorPickerChange)="colorChanged()" 
   [style.background]="bgColor">
</div>

colorChanged() gets called by the colorPickerChnage on mousemove. I want to have something like this in my component:

colorChanged$.subscribe(data => console.log(data))

(It will have some debounce and more subscribers, that's why I'd like to have it as an observable.)

Answer 1

I solved it.

Template:

<div class="btn-group cp">
   <input [colorPicker]="bgColor" 
   (colorPickerChange)="colorChanged(bgColor)" 
   [style.background]="bgColor">
</div>

And then in the component:

import { Subject } from 'rxjs';

  colorChanged$ = new Subject<string>();

  colorChanged(bgColor) {
     this.colorChanged$.next(bgColor)
  }

  ngOnInit() {
     this.colorChanged$.subscribe(v => console.log(v));
  }