CngxSwipeDismiss

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/gestures/swipe-dismiss.directive.ts

Import#

import { CngxSwipeDismiss } from '@cngx/common/interactive'

Description#

Detects directional swipe gestures via Pointer Events.

Generic atom usable for drawers (swipe-to-close), bottom sheets, carousels, and dismissible cards. Emits swiped when the gesture completes past the threshold. Exposes swiping and swipeProgress signals for real-time visual feedback during the gesture.

Close drawer on swipe-left

<nav [cngxDrawerPanel]="drawer"
     cngxSwipeDismiss="left" (swiped)="drawer.close()">
  …
</nav>

Bottom sheet with progress

<div cngxSwipeDismiss="down" #swipe="cngxSwipeDismiss"
     [style.transform]="'translateY(' + (swipe.swipeProgress() * 100) + '%)'">
  …
</div>

https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/swipe-dismiss/directional-swipe

Metadata#

Selector: [cngxSwipeDismiss]
Export as: cngxSwipeDismiss

Index#

Inputs#

direction#SwipeDirection

input()Required

Direction of the swipe that triggers dismissal.

default { alias: 'cngxSwipeDismiss' }

enabled#boolean

input()

Whether the directive is active.

default true

threshold#number

input()

Minimum distance in px to register as a completed swipe.

default 50

Outputs#

swiped#void

output()

Emitted when a swipe gesture completes past the threshold.

Instance Properties#

swipeProgress#unknown

Readonly

Progress of the current swipe from 0 to 1 (clamped).

this.swipeProgressState.asReadonly()

swiping#unknown

Readonly

Whether a swipe gesture is currently in progress.

this.swipingState.asReadonly()

CngxSwipeDismiss

Import#

Description#

Close drawer on swipe-left#

Bottom sheet with progress#

Related#