What is the best way to implement a hover delay for an element in Angular?

Question

What is the best way to implement a hover delay for an element in Angular?

Here is an element I'm working with:

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

In my TypeScript file:

onHover = false;

enter() {
    this.onHover = true;
    // additional functionality...
}

leave() {
    this.onHover = false;
    // additional functionality...
}

I am looking to implement a 2-second delay on the mouseenter event, similar to what was discussed in this question. The goal is for the mouseenter trigger to only activate if the user has hovered over the element for at least 2 seconds. I attempted using setTimeout, but encountered some unexpected behavior.

angular typescript

Answer 1

Answer №1

I had a moment of clarity when I realized that I had neglected to include clearTimeout. Here is how I remedied the issue:

onHover = false;
to;

enter() {
    this.to = setTimeout(() => {
        this.onHover = true;
        // performing additional tasks...
    }, 2000);
}

leave() {
    clearTimeout(this.to);
    this.onHover = false;
    // performing additional tasks...
}

Answer 2

I had a moment of clarity when I realized that I had neglected to include clearTimeout. Here is how I remedied the issue:

onHover = false;
to;

enter() {
    this.to = setTimeout(() => {
        this.onHover = true;
        // performing additional tasks...
    }, 2000);
}

leave() {
    clearTimeout(this.to);
    this.onHover = false;
    // performing additional tasks...
}

What is the best way to implement a hover delay for an element in Angular?

Answer №1

Similar questions

The error message "Property '...' is not found on the type 'ServerContextJSONValue'" pops up whenever I try to utilize the useContext() function

Oops! An unexpected error occurred: TypeError - Seems like _this.searchElementRef is not defined

When using a Redux action type with an optional payload property, TypeScript may raise complaints within the reducer

What is the best way to reset an Observable while maintaining a filter in place?

The type 'string | AddressInfo' does not include a 'port' property and does not have a string index signature

Angular 6's Select feature is failing to properly update user information

TypeScript combined with Vue 3: Uncaught ReferenceError - variable has not been declared

Omit an enum item from selection when referencing the key within the Enum

Issue: Cannot assign type 'Promise<PostInfo>[]' to type 'PostInfo[]' while updating state

Encountering a 401 error when trying to access OneNote resource in Angular 5 with Microsoft Graph

Decrease initial loading time for Ionic 3

Harnessing the Power of FormControlName and Labels in Angular 6

Troubleshooting Angular 2 Component: Why is console.log not functioning in Typescript?

What is the best way to iterate through an array within a class in Angular 2?

Enhance your Next.js routing by appending to a slug/url using the <Link> component

Struggling to obtain the Variable

Issue: Module '@angular/compiler' not found

Basic Karma setup with Typescript - Error: x is undefined

Angular2: Navigational Errors Demystified

Angular 2: Dynamically Adjusting View Components Based on URL Path