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

Question

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.

I see not setTimeout here,. – Antoniossss Mar 31 '22 at 08:24 — Antoniossss, Mar 31 '22 at 08:24

score 3 · Accepted Answer · answered Mar 31 '22 at 08:36

I realised that I forgot to add clearTimeout. I've solved it like this:

onHover = false;
to;

enter() {
    this.to = setTimeout(() => {
        this.onHover = true;
        // doing some other stuff...
    }, 2000);
}

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

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

1 Answers1