CngxRipple
projects/common/interactive/ripple/ripple.directive.ts
Import#
import { CngxRipple } from '@cngx/common/interactive'
Description#
Touch/click ripple feedback without Material dependency.
Creates a <span class="cngx-ripple__wave"> on pointer contact, positions it
via CSS custom properties (--cngx-ripple-x, --cngx-ripple-y, --cngx-ripple-size),
and removes it after the animation completes. ALL visual treatment - color, duration,
shape - is the consumer's CSS responsibility.
Ships a companion _ripple.scss with sensible defaults.
Button with ripple
<button cngxRipple>Click me</button>Centered ripple for icon buttons
<button cngxRipple [rippleCentered]="true" class="icon-btn">
<mat-icon>favorite</mat-icon>
</button>Disable ripple
<button cngxRipple [rippleDisabled]="isReducedMotion()">Click</button>Metadata#
Host#
Relationships
Index#
Properties
HostBindings
HostListeners
Inputs#
Whether the ripple originates from the center of the host.
false, { alias: 'rippleCentered' }Ripple color - passed as --cngx-ripple-color on the wave element.
'currentColor', { alias: 'rippleColor' }Instance Properties#
unknownWhether a ripple animation is currently playing.
this.activeState.asReadonly()HostBindings#
| Binding | Expression |
|---|---|
[style.position] | "relative" |
[style.overflow] | "hidden" |
HostListeners#
| Event | Handler |
|---|---|
(pointerdown) | pointerdown() |