hammerjs-gestures

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
    }

Bonus

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>

hammerjs-gestures

Links

Bonus