How do I add a delay for hovering an element in angular?

I have an element:

<div (mouseenter)="enter()" (mouseleave)="leave()">Title</div>


TS:

onHover = false;

enter() {
this.onHover = true;
// doing some other stuff...
}

leave() {
this.onHover = false;
// doing some other stuff...
}


I want to add 2 seconds delay to mouseenter event like in this question. If user hovers >= 2 seconds on that element, I want to trigger mouseenter, not before. I tried setTimeout, but it doesn't work as intended.

Continue reading...