Hammjer js and ng2-pdf-viewer (ionic 3)

app.modules.ts

import 'hammerjs'; // --> install and import hammerjs
import { PdfViewerModule } from 'ng2-pdf-viewer'; // --> install and import ng2-pdf-view
import { NgModule } from '@angular/core';
import { BrowserModule, HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser'; //--> import the HAMMER_GESTURE_CONFIG
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// PS: --> this was only tested with Android Devices

// need the hammerConnfig 
export class HammerConfig extends HammerGestureConfig {
  overrides = {
    pan: {
        direction: 6
    },
    pinch: {
        enable: true
    },
    rotate: {
        enable: false
    }
};
}

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    PdfViewerModule, // --> importhe the ng2-pdf module
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  // add the hammer gesture config
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: HammerConfig
    }

  ]
})

export class AppModule {}

pdf-modal.html

<ion-header>

  <ion-toolbar>
    <ion-title>{{title}}</ion-title>

    <ion-buttons left>
      <button ion-button (click)="download()" strong style="width:115%;text-align:center;" >
        <ion-icon   name="md-download" style="color:white;font-size:170% !important;"></ion-icon>
      </button>
    </ion-buttons> 

    
    <ion-buttons end>
      <button ion-button (click)="dismiss()" strong style="width:115%;text-align:center;">
        <ion-icon name="close" style="color:white;font-size:170% !important"></ion-icon>
      </button>
    </ion-buttons>

   
  </ion-toolbar>
</ion-header>

<!-- add the pinchin and pinchout events -->
<ion-content (pinchin)="pinchin($event)" (pinchout)="pinchout($event)">
 
    <pdf-viewer [src]="pdf" [page]="page" (after-load-complete)="afterLoadComplete($event)" [render-text]="true" [show-all]="false" [zoom]="zoom" [original-size]="false" 
    style="width:100%;height:85%; overflow:scroll;display:flex;-webkit-overflow-scrolling: touch; display: -webkit-flex;">
    </pdf-viewer>


  <div style="text-align:center;position: initial;display:block;justify-content:space-between;height:12%;padding-left:4%; padding-right:4%;flex-direction:row;">
    <button (click)="previousPage()" [disabled]="page === 1" style="background:transparent;opacity:0.2">
      <ion-icon style="font-size:50px" name="md-rewind"></ion-icon>
    </button>
    <button (click)="zoomOut()" style="background:transparent;opacity:0.2">
      <ion-icon style="font-size:50px" name="ios-remove-circle-outline"></ion-icon>
    </button>
    <button (click)="zoomIn()" style="background:transparent;opacity:0.2">
      <ion-icon style="font-size:50px" name="ios-add-circle-outline"></ion-icon>
    </button>
    <button (click)="nextPage()" [disabled]="totalPages === 1 "style="background:transparent;opacity:0.2">
      <ion-icon style="font-size:50px" name="md-fastforward"></ion-icon>
    </button><br>
    <p style="color:black; font-size:12px;">{{ page }} / {{ totalPages }}</p>
  </div>

</ion-content>

pdf-modal.ts

import 'hammerjs'; // -> import hammerjs 
import 'rxjs/add/operator/take';
import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'; // --> if need to sanitize the url
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { NavController, NavParams, Platform } from 'ionic-angular';

@Component({
  selector: 'page-pdf-modal',
  templateUrl: 'pdf-modal.html',
})

export class PdfModalPage {

  pdf: string;
  title: string;
  url: string;
  zoom: number = 1;
  totalPages: number;
  page: number = 1;
  pdf_sanatized: any;
  currentZoom: any;
  isLoaded: boolean = false;

  constructor(public navCtrl: NavController, public navParams: NavParams,public sanitizer: DomSanitizer) {
    this.pdf = "MY_URL_OR_ASSETS";
    this.title = "MY_TITLE";

  }

  zoomIn() {
    this.zoom += 0.20;
  }

  zoomOut() {
    this.zoom -= 0.20;
  }

  nextPage() {
    this.page += 1;
  }

  previousPage() {
    this.page -= 1;
  }

  download() {
    window.open(this.pdf, '_system', 'location=no');
  }

  pinchin(event: any): void {
    this.zoom -= 0.04;
  }

  pinchout(event: any): void {
    this.zoom += 0.04;
  }

  afterLoadComplete(pdfData: any) {
    this.totalPages = pdfData.numPages;
    this.isLoaded = true;
  }

}