Angular Swipe
A lightweight Angular directive to detect swipes on touchscreen devices.
Installation
npm install ng-swipe --save
Usage
Import SwipeModule
to your module:
import { SwipeModule } from 'ng-swipe';
@NgModule({
imports: [
SwipeModule
],
})
Add ngSwipe
directive to your DOM element and listen to swipeMove
or swipeEnd
events that are emitted when
swipe happens on this element.
Both events correspond to SwipeEvent
interface, which contains two fields:
direction: 'y' | 'x'
- defines swipe direction
distance: number
- defines swipe length in pixels
import { SwipeEvent } from 'ng-swipe';
@Component({
selector: 'app',
template: `
<div
ngSwipe
(swipeMove)="onSwipeMove($event)"
(swipeEnd)="onSwipeEnd($event)"
>My test element for swipe</div>
`
})
export class AppComponent {
onSwipeMove(event: SwipeEvent) {
console.log(`swipe direction: ${event.direction}`);
console.log(`swipe distance: ${event.distance}`);
}
onSwipeEnd(event: SwipeEvent) {
console.log(`swipe direction: ${event.direction}`);
console.log(`swipe distance: ${event.distance}`);
}
}
Swipe direction
All four swipe directions(right, left, up, down) can be easily detected by filtering events by direction
and
distance
fields in
consumer component e.g. right swipe will have direction === 'x'
and distance > 0
.