CngxPressable

DirectivePrimaryv0.1.0

projects/common/interactive/ripple/pressable.directive.ts

Import#

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

Description#

Provides instant press feedback via CSS class on pointerdown.

Click feedback fires too late - press feedback is immediate (0ms latency). The class is removed on pointerup with an optional delay to prevent a visual flash on quick taps.

The directive only toggles the cngx-pressed class. All visual treatment (scale, opacity, color) is the consumer's CSS responsibility.

.cngx-pressed { transform: scale(0.97); }

Button with press feedback

<button cngxPressable>Click me</button>

Card with custom delay

<div cngxPressable [pressableReleaseDelay]="120" class="card">
  Tappable card
</div>

https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/pressable/press-feedback-on-buttons https://cngxjs.github.io/cngx/examples/#/common/interactive/gestures/pressable/tappable-card

Metadata#

Selector: [cngxPressable]
Export as: cngxPressable

Host#

Bound classes: cngx-pressed ← pressed
Listeners: pointerdown → handlePointerDown pointerup → handlePointerUp pointercancel → handlePointerCancel pointerleave → handlePointerCancel

Index#

Inputs#

releaseDelay#number

input()

Minimum time in ms the pressed class stays active - prevents flash on quick taps.

default 80, { alias: 'pressableReleaseDelay' }

Instance Properties#

pressed#unknown

Readonly

Whether the element is currently in the pressed state.

this.pressedState.asReadonly()

HostBindings#

Binding	Expression
`[class.cngx-pressed]`	`pressed()`

HostListeners#

Event	Handler
`(pointerdown)`	`pointerdown()`
`(pointerup)`	`pointerup()`
`(pointercancel)`	`pointercancel()`
`(pointerleave)`	`pointerleave()`

CngxPressable

Import#

Description#

Button with press feedback#

Card with custom delay#

Related#

Metadata#

Host#

Index#

Properties

Inputs

HostBindings