I'm having trouble creating this observable. In my Angular application, I have an element that can be hidden. The requirement is that if the user moves the mouse away from the element and does not return within 500ms, the element should hide.
The visualization looks like this:
onleave --x-------x------------------------>
onenter -----x----------------------------->
<--500ms-->
_________________________________________
hide ---------------------x------------->
const leave$ = fromEvent(this.selector.nativeElement,"mouseleave");
const enter$ = fromEvent(this.selector.nativeElement,"mouseenter");
const hide$ = // ToDo: implement logic
EDIT:
I've created an observable, but it's not functioning as expected:
const leave$ = fromEvent(this.backgroundSelector.nativeElement, "mouseleave");
const enter$ = fromEvent(this.backgroundSelector.nativeElement, "mouseenter");
const hide$ = leave$.pipe(
mergeMap(event =>
of(event).pipe(
delay(500),
takeUntil(enter$)
)
)
);
hide$.pipe(takeUntil(this.destroy$)).subscribe(_ => this.hideSelector());
The problem is that the element only hides when I return with the mouse cursor after 500ms.