Tips of using RxJS

Async EventEmitter

Oh EventEmitter is Angular extension, not RxJS, whatever!

asyncEvent = new EventEmitter(true);

EventEmitter accept boolean argument, subscription get called in next JavaScript cycle, if sync event causes dead-lock, performance issues, or other problems, async is a quick solution.

Debounced or Shuffle Event

class OurComponent {
  private changed = new Subject<string>();

  private _value: string;

  get value() { return this._value; }

  set value(v: string) {
    if (v != this._value) {
       this._value = v;
       this.changed.next(v);
    }
  }

  @Output
  get delayedChange(): Observable<string> {
      return this.changed.pipe(debounceTime(500));
  }
}

Change delayedChange be a property, return a new observable filtered with debounceTime RxJS operation.

Disable an Event on Dispose

Suppose an event got from Dom world or other external source, you want disable derived event on component dispose, see code of cdk CdkScrollable directive for a clue.