CngxSwipe
projects/common/interactive/gestures/swipe.directive.ts
Import#
import { CngxSwipe } from '@cngx/common/interactive'
Description#
Detects directional swipe gestures via Pointer Events and reports the resolved direction.
Generic navigation atom: unlike CngxSwipeDismiss (one fixed
direction, dismiss intent), this emits swiped with the dominant
direction so a single host can drive bidirectional flows - carousels,
paged views, prev/next steppers. The axis input pins the gesture to
horizontal or vertical so an orthogonal scroll never fires it.
Exposes swiping, swipeProgress, and swipeDirection signals for
real-time feedback mid-gesture.
Carousel: route left/right into a presenter
<section cngxSwipe axis="x" (swiped)="onSwipe($event)">…</section>onSwipe(direction: SwipeDirection): void {
if (direction === 'left') {
this.next();
} else if (direction === 'right') {
this.previous();
}
}Metadata#
Host#
Relationships
Index#
Properties
Outputs
Derived State
Inputs#
Outputs#
Instance Properties#
unknownDominant direction of the in-flight gesture, or null when idle.
this.swipeDirectionState.asReadonly()unknownProgress of the current swipe from 0 to 1 (clamped).
this.swipeProgressState.asReadonly()unknownWhether a swipe gesture is currently in progress.
this.swipingState.asReadonly()HostBindings#
| Binding | Expression |
|---|---|
[style.touch-action] | touchAction() |
[style.user-select] | swiping() ? 'none' : null |
[style.-webkit-user-select] | swiping() ? 'none' : null |