OnLongPress ​

Detect long press gestures on an element. Calls a callback after a configurable delay if the pointer stays down without moving beyond the distance threshold.

Loading demo...

Usage ​

angular-ts
import { Component, viewChild, ElementRef } from '@angular/core';
import { onLongPress } from '@signality/core';

@Component({
  template: `<button #btn>Hold me</button>`,
})
export class LongPressDemo {
  readonly btn = viewChild<ElementRef>('btn');

  constructor() {
    onLongPress(this.btn, event => { 
      console.log('Long press detected!', event.clientX, event.clientY);
    });
  }
}

Parameters ​

ParameterTypeDescription
targetMaybeElementSignal<HTMLElement>Target element to detect long presses on
handler(event: PointerEvent) => voidCallback invoked when a long press is detected
optionsOnLongPressOptionsOptional configuration (see Options below)

Options ​

The OnLongPressOptions extends WithInjector:

OptionTypeDefaultDescription
delayMaybeSignal<number>500Time in ms before the callback is triggered
distanceThresholdnumber | false10Max distance (px) the pointer can move before cancelling. Set to false to disable
injectorInjector-Optional injector for DI context

Return Value ​

Returns a OnLongPressRef with a destroy method to stop detection:

PropertyTypeDescription
destroy() => voidStops long press detection

Examples ​

Custom delay ​

angular-ts
import { Component, viewChild, ElementRef, signal } from '@angular/core';
import { onLongPress } from '@signality/core';

@Component({
  template: `<button #btn>Hold for 1 second</button>`,
})
export class CustomDelayDemo {
  readonly btn = viewChild<ElementRef>('btn');

  constructor() {
    onLongPress(this.btn, () => {
      console.log('Long press after 1s!');
    }, { delay: 1000 }); 
  }
}

Disable distance threshold ​

angular-ts
import { Component, viewChild, ElementRef } from '@angular/core';
import { onLongPress } from '@signality/core';

@Component({
  template: `<div #area>Hold anywhere</div>`,
})
export class NoDistanceDemo {
  readonly area = viewChild<ElementRef>('area');

  constructor() {
    onLongPress(this.area, () => {
      console.log('Long press — movement ignored!');
    }, { distanceThreshold: false }); 
  }
}

SSR Compatibility ​

On the server, the utility returns a no-op ref with an empty destroy method.

Type Definitions ​

typescript
interface OnLongPressOptions extends WithInjector {
  readonly delay?: MaybeSignal<number>;
  readonly distanceThreshold?: number | false;
}

interface OnLongPressRef {
  readonly destroy: () => void;
}

function onLongPress(
  target: MaybeElementSignal<HTMLElement>,
  handler: (event: PointerEvent) => void,
  options?: OnLongPressOptions
): OnLongPressRef;
Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23