Hover

Normalizes the hover event across different browsers and devices.

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

• Selector: [ngpHover]
• Exported As: ngpHover

Apply the ngpHover directive to an element that you want to listen for hover events. This 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.

Event emitted when the hover state changes. Event emitted when the hover starts. Event emitted when the hover ends. Whether hover events are disabled.

Data Attributes

Attribute	Description	Value
data-hover	Whether the element is being hovered.	true | false