Angular 2 RxJS check if mouse event is still active after delay

The Günter's answer is exactly what you expect but you should use the of operator instead of the return one that doesn't exist.

this._mouseEnterStream.flatMap((e) => {
  console.log('_mouseEnterStream.flatMap');
  return Observable
      .of(e)
      .delay(2000)
      .takeUntil(this._mouseLeaveStream);
}).subscribe(
  (e) => {
    console.log('yay, it worked!');
    console.log(e);
  }
);

See the corresponding plunkr: https://plnkr.co/edit/vP3xRDXxFanqzLEKd3eo?p=preview.

Also, there is a proposal in Angular that aims to simplify the way observables are created from DOM events using Rx via template syntax.


Looks quite similar to How do I timeout an event in RxJS?

this.myStream = this._mouseEnterStream
    .flatMap((e) => {
        return Observable
            .of(e)
            .delay(2000)
            .takeUntil(mouseLeaveStream);
    });

myStream.subscribe((x) => { 
        console.log('onNext: ', x);
});

I don't use TS or Rx myself (only Dart) therefore I don't know if this is the correct syntax or if the name of the operators match with these available for Angular.