Hover

Normalizes the hover event across different browsers and devices.

import { Component, signal } from "@angular/core";
import { NgpHover } from "ng-primitives/interactions";

@Component({
  selector: "app-hover",
  imports: [NgpHover],
  styles: `
    div {
      display: flex;
      width: 10rem;
      height: 6rem;
      background-color: var(--ngp-background);
      border: 1px solid var(--ngp-border);
      align-items: center;
      justify-content: center;
      border-radius: 0.5rem;
      box-shadow: var(--ngp-shadow);
      transition: all 0.2s;
      cursor: pointer;
    }

    div[data-hover] {
      background-color: var(--ngp-background-blue);
      border-color: var(--ngp-border-blue);
    }
  `,
  template: `
    <div (ngpHover)="isHovering.set($event)">
      {{ isHovering() ? "Hovering" : "Not Hovering" }}
    </div>
  `,
})
export default class HoverExample {
  isHovering = signal(false);
}

Import

Import the Hover primitive from ng-primitives/interactions.

import { NgpHover } from 'ng-primitives/interactions';

Usage

Assemble the hover directives in your template.

<div
  (ngpHover)="onHoverChange($event)"
  (ngpHoverStart)="onHoverStart()"
  (ngpHoverEnd)="onHoverEnd()"
></div>

API Reference

The following directives are available to import from the ng-primitives/interactions package:

NgpHover

Apply the `ngpHover` directive to an element that you want to listen for hover events. T his is particulaly useful for supporting hover events on touch devices, where hover events are not handled consistently. On iOS relying on the `:hover` pseudo-class can result in the hover state being stuck until the user taps elsewhere on the screen.

• Selector: [ngpHover]
• Exported As: ngpHover

Data Attributes

Disabling Hover Interaction

Many primitives automatically add hover handling to components. If you want to disable hover handling, either globally or on a per-component/per-directive basis, you can do so by registering the provideInteractionConfig provider and setting the hover option to false.

import { provideInteractionConfig } from 'ng-primitives/interactions';

providers: [
  provideInteractionConfig({
    hover: false,
  }),
],