To act upon swipes, pans, and pinhces as well as the other mobile gestures, you can use hammerjs with HostListener decorator, or an event binding,
npm install hammerjs
@HostListener('swiperight')
public swiperight(): void {
// Run code when a user swipes to the right
}
Here are samples on how to use all of the hammerjs event bindings, you can use these events with a HostListener as well:
<!-- pan events -->
<div (pan)="logEvent($event)"></div>
<div (panstart)="logEvent($event)"></div>
<div (panmove)="logEvent($event)"></div>
<div (panend)="logEvent($event)"></div>
<div (pancancel)="logEvent($event)"></div>
<div (panleft)="logEvent($event)"></div>
<div (panright)="logEvent($event)"></div>
<div (panup)="logEvent($event)"></div>
<div (pandown)="logEvent($event)"></div>
<!-- pinch events -->
<div (pinch)="logEvent($event)"></div>
<div (pinchstart)="logEvent($event)"></div>
<div (pinchmove)="logEvent($event)"></div>
<div (pinchend)="logEvent($event)"></div>
<div (pinchcancel)="logEvent($event)"></div>
<div (pinchin)="logEvent($event)"></div>
<div (pinchout)="logEvent($event)"></div>
<!-- press events -->
<div (press)="logEvent($event)"></div>
<div (pressup)="logEvent($event)"></div>
<!-- rotate events -->
<div (rotate)="logEvent($event)"></div>
<div (rotatestart)="logEvent($event)"></div>
<div (rotatemove)="logEvent($event)"></div>
<div (rotateend)="logEvent($event)"></div>
<div (rotatecancel)="logEvent($event)"></div>
<!-- swipe events -->
<div (swipe)="logEvent($event)"></div>
<div (swipeleft)="logEvent($event)"></div>
<div (swiperight)="logEvent($event)"></div>
<div (swipeup)="logEvent($event)"></div>
<div (swipedown)="logEvent($event)"></div>
<!-- tap event -->
<div (tap)="logEvent($event)"></div>