nativescript-ngx-debounce-tap

{N} + Angular directive for debouncing taps and adding animated feedback to the interaction.

Installation

tns plugin add nativescript-ngx-debounce-tap

Usage

Import the module in your app module

import { NgDebounceTapModule } from 'nativescript-ngx-debounce-tap';

@NgModule({
    imports: [
        NgDebounceTapModule,
        // ...
    ],
    // ...
})
export class MyModule { }

Then use it in your templates like so

 <Label text="Hello World!" 
        ngDebounceTap 
        [delay]="320"
        [anim]="'composite'" 
        [scale]="1.06" 
        [opacity]="0.2" 
        (debounceTap)="hello()"></Label>

Do check out the demo for a quickstart

Screenshot portrait

API

Property	Type	Default	Description
delay	number	300	The time between each processed tap in milliseconds.
anim	string	n/a	The way the interaction is to be animated. Possible values: 'composite', 'opacity', 'scale'. Scale => The element is magnified and returned to its original state. Opacity => The element has its opacity dropped to 0.6 and then returns to normal, like TouchableOpacity in React Native (not the values, the behavior). Composite => Performs both animations symultaneously.
scale	number	1.2	The scale to use when magnifying the element. Set this in order to keep the animation as seamless as possible.
opacity	number	0.6	The opacity used to animate the interaction. Set it to your liking, the default value can be hard to see on some scenarios so keep that in mind!
debounceTap	EventEmitter	n/a	The event that is emitted when a tap is processed. The $event variable will have a reference to the element that was tapped (as an ElementRef). In case the scale animation is not your thing you can set [anim] to false and make one that suits you in this callback yourself.

Changelog

1.2.0 - Added the opacity @Input property to the directive for further customization. 1.1.0 - Added opacity animation as an option. 1.0.0 - Initial implementation

License

Apache License Version 2.0, January 2004