PointerSwipe

Reactive pointer-swipe detection on an element. Tracks swipe gestures using Pointer Events and provides direction and distance signals. Works with mouse, touch, and pen input.

Loading demo...

Usage

import { Component, viewChild, ElementRef } from '@angular/core';
import { pointerSwipe } from '@signality/core';

@Component({
  template: `
    <div #area style="touch-action: none; user-select: none">
      <p>Swiping: {{ sw.isSwiping() }}</p>
      <p>Direction: {{ sw.direction() }}</p>
    </div>
  `,
})
export class PointerSwipeDemo {
  readonly area = viewChild<ElementRef>('area');
  readonly sw = pointerSwipe(this.area); 
}

Parameters

Parameter	Type	Description
target	MaybeElementSignal<HTMLElement>	Element to detect swipe gestures on
options	PointerSwipeOptions	Optional configuration (see Options below)

Options

The PointerSwipeOptions extends WithInjector:

Option	Type	Default	Description
threshold	number	50	Minimum distance in pixels before a swipe is recognized
pointerTypes	PointerType[]	['mouse', 'touch', 'pen']	Pointer types to listen for
injector	Injector	-	Optional injector for DI context

Return Value

Returns a PointerSwipeRef:

Property	Type	Description
isSwiping	Signal<boolean>	Whether a swipe gesture is currently in progress
direction	Signal<PointerSwipeDirection>	Current swipe direction ('up', 'down', 'left', 'right', or 'none')
distanceX	Signal<number>	Horizontal distance from start (positive = swiped left)
distanceY	Signal<number>	Vertical distance from start (positive = swiped up)

Examples

Mouse-only swipe

Restrict detection to mouse input only.

import { Component, viewChild, ElementRef, computed } from '@angular/core';
import { pointerSwipe } from '@signality/core';

@Component({
  template: `
    <div #area style="touch-action: none; user-select: none">
      <p>{{ arrow() }}</p>
      <p>Distance: {{ sw.distanceX() }}px / {{ sw.distanceY() }}px</p>
    </div>
  `,
})
export class MouseSwipeDemo {
  readonly area = viewChild<ElementRef>('area');
  readonly sw = pointerSwipe(this.area, { pointerTypes: ['mouse'] }); 

  readonly arrow = computed(() => {
    switch (this.sw.direction()) {
      case 'up': return 'Up';
      case 'down': return 'Down';
      case 'left': return 'Left';
      case 'right': return 'Right';
      default: return 'Swipe in any direction';
    }
  });
}

SSR Compatibility

On the server, signals initialize with safe defaults:

• isSwiping → false
• direction → 'none'
• distanceX → 0
• distanceY → 0

Type Definitions

type PointerType = 'mouse' | 'touch' | 'pen';

type PointerSwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';

interface PointerSwipeOptions extends WithInjector {
  readonly threshold?: number;
  readonly pointerTypes?: PointerType[];
}

interface PointerSwipeRef {
  readonly isSwiping: Signal<boolean>;
  readonly direction: Signal<PointerSwipeDirection>;
  readonly distanceX: Signal<number>;
  readonly distanceY: Signal<number>;
}

function pointerSwipe(
  target: MaybeElementSignal<HTMLElement>,
  options?: PointerSwipeOptions
): PointerSwipeRef;

Related

• Swipe — Touch-only swipe detection on an element
• OnLongPress — Detect long press gestures on an element
• MousePosition — Track mouse position on an element

Edit this page on GitHub Last updated: Mar 19, 2026, 23:28:23

PreviousOnLongPressNextScrollPosition