ng2-pdf-viewer_with_zoom

import {AfterViewInit, Component, ViewChild} from '@angular/core';

import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import {PdfViewerComponent} from 'ng2-pdf-viewer';

@Component({
  selector: 'app-root',
  template: `
    <h1 style="background-color: white">PDF.Js Zoom</h1>
    <pdf-viewer
        [src]="pdfSrc"
        [zoom]="pdfZoom"
        [render-text]="true"
        [original-size]="false"
        [show-all]="true"
        style="display: block; height: 100%"
    ></pdf-viewer>
  `,
  styleUrls: ['app.component.scss']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(PdfViewerComponent, {static: false}) private pdfComponent: PdfViewerComponent;

  pdfSrc = 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf';
  public pdfZoom = 1;
  private pinchZoomEnabled = false;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  ngAfterViewInit(): void {
    if (!this.pinchZoomEnabled) {
      this.pinchZoomEnabled = true;
      this.enablePinchZoom(
          this.pdfComponent.pdfViewer,
          this.pdfComponent.pdfViewerContainer.nativeElement,
          this.pdfComponent.pdfViewerContainer.nativeElement.children[0]
      );
    }
  }

  private enablePinchZoom(pdfViewer, container, viewer) {
    let startX = 0, startY = 0;
    let initialPinchDistance = 0;
    let pinchScale = 1;
    // const viewer = document.getElementById('viewer');
    // const container = document.getElementById('viewerContainer');
    const reset = () => { startX = startY = initialPinchDistance = 0; pinchScale = 1; };
    // Prevent native iOS page zoom
    // document.addEventListener("touchmove", (e) => { if (e.scale !== 1) { e.preventDefault(); } }, { passive: false });
    document.addEventListener('touchstart', (e) => {
      console.log('Touchstart');
      if (e.touches.length > 1) {
        startX = (e.touches[0].pageX + e.touches[1].pageX) / 2;
        startY = (e.touches[0].pageY + e.touches[1].pageY) / 2;
        initialPinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
      } else {
        initialPinchDistance = 0;
      }
    });
    document.addEventListener('touchmove', (e) => {
      if (initialPinchDistance <= 0 || e.touches.length < 2) { return; }
      // scale non-standard (missing where?) property exposing distance between two fingers/touches
      if ((e as any).scale !== 1) { e.preventDefault(); }
      const pinchDistance = Math.hypot((e.touches[1].pageX - e.touches[0].pageX), (e.touches[1].pageY - e.touches[0].pageY));
      const originX = startX + container.scrollLeft;
      const originY = startY + container.scrollTop;
      pinchScale = pinchDistance / initialPinchDistance;
      viewer.style.transform = `scale(${pinchScale})`;
      viewer.style.transformOrigin = `${originX}px ${originY}px`;
    }, { passive: false });
    document.addEventListener('touchend', (e) => {
      if (initialPinchDistance <= 0) { return; }
      viewer.style.transform = `none`;
      viewer.style.transformOrigin = `unset`;
      this.pdfZoom *= pinchScale; // previously PDFViewerApplication.pdfViewer.currentScale
      const rect = container.getBoundingClientRect();
      const dx = startX - rect.left;
      const dy = startY - rect.top;
      container.scrollLeft += dx * (pinchScale - 1);
      container.scrollTop += dy * (pinchScale - 1);
      reset();
    });
  }
}