Interactions

Hover

Normalizes the hover event across different browsers and devices.

Not Hovering

/** This example uses ng-primitives styles, which are imported from ng-primitives/example-theme/index.css in the global styles file **/
import { Component, signal } from "@angular/core";
import { NgpHover } from "ng-primitives/interactions";

@Component({
  selector: "app-root",
  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 class AppComponent {
  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

ngpHoverDisabled

boolean

Whether hoving should be disabled.

ngpHoverStart

void

Emit an event when hovering starts.

ngpHoverEnd

void

Emit an event when hovering ends.

ngpHover

boolean

Emit an event when the hover state changes.

Data Attributes

Attribute	Description
`data-hover`	Added to the element when hovering occurs.

Getting Started

Primitives