Interactions

Press

Normalizes the press event across different browsers and devices.

Not Pressed

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

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

    div[data-press] {
      background-color: var(--ngp-background-active);
      box-shadow: var(--ngp-button-shadow);
    }
  `,
  template: `
    <div (ngpPress)="isPressed.set($event)">
      {{ isPressed() ? "Pressed" : "Not Pressed" }}
    </div>
  `,
})
export default class PressExample {
  isPressed = signal(false);
}

Import

Import the Press primitives from ng-primitives/interactions.

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

Usage

Assemble the press directives in your template.

<div
  ngpPress
  (ngpPressStart)="onPressStart()"
  (ngpPressEnd)="onPressEnd()"
  (ngpPressChange)="onPressChange($event)"
></div>

API Reference

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

NgpPress

The `ngpPress` directive listens for press events on an element. This is particularly useful for supporting press events on touch devices, where press events are not handled consistently.

Selector: [ngpPress]
Exported As: ngpPress

ngpPressDisabled

boolean

Whether listening for press events is disabled.

ngpPressStart

void

Emit when the press begins.

ngpPressEnd

void

Emit when the press ends.

ngpPress

boolean

Emit when the press changes.

Data Attributes

Attribute	Description
`data-press`	Applied when the element is being pressed.

Getting Started

Primitives