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.