Accessing PDF properties typescript example about ng2-pdf-viewer

[VadimDez]

Did you try to pass callback to [on-load-complete] ? There you can get pdf once it's loaded. See https://github.com/VadimDez/ng2-pdf-viewer#on-load-complete

[ctbolton]

Thanks Vadim. I did try that. I can see the number of pages from the PDF in the on-load-complete function but the UI isnt showing the update. I'm sure it has to do with it updating after the UI has already completed rendering or a parent/child type scope issue. I've tried using the NgZone as well as some other "digest update" type features as well, but can't seem to get it to work.

[VadimDez]

It may be because you didn't bind the callback function, did you?
Otherwise show what are you trying to do in the callback function.

[ctbolton]

Thanks Vadim. I took another look at your latest check in for the zoom property and got it working. Thanks again for the super fast response!

[nessgor]

Hello @VadimDez I got a similar issue

  pdfDidLoad(pdf: any) {
    this.totalPages = pdf.numPages;
    console.log(this);
    console.log(pdf);
  }

I want to retrieve the numPages variable and set to the totalPages variable to my own class
but "this." is referencing to the PDFViewerComponent Class, not my own class

any hints or clues how to do this? thanks very much !

[VadimDez]

@nessgor, did you bind pdfDidLoad function to your class ?

[nessgor]

Don't know how to bind the pdfDidLoad function to my class, by adding the [on-load-complete] ??

pdf.html

<ion-header>
    <ion-toolbar>
        <ion-buttons left>
            <button ion-button (click)="dismiss()">
        <ion-icon name="arrow-round-back"></ion-icon>
      </button>
        </ion-buttons>
        <ion-title>
            {{name}}
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content scroll="false">
    <ion-scroll class="zoom-pane" scrollX="true" scrollY="true" zoom="true" maxZoom="3">
        <pdf-viewer [src]="pdfSrc" [page]="page" [original-size]="true" [zoom]="zoom" [show-all]="false" [on-load-complete]="pdfDidLoad"></pdf-viewer>
    </ion-scroll>
</ion-content>

<ion-footer>
    <ion-item>
        <ion-range min="1" [max]="totalPages" step="1" snaps="true" color="secondary" [(ngModel)]="page">
            <ion-label range-left>
                <button ion-button (click)="prevPage()">
                    <ion-icon name="arrow-round-back"></ion-icon>
                </button> 1
            </ion-label>
            <ion-label range-right>
                {{totalPages}}
                <button ion-button (click)="nextPage()">
                    <ion-icon name="arrow-round-forward"></ion-icon>
                </button>
            </ion-label>
        </ion-range>
    </ion-item>
</ion-footer>

pdf.ts

import { Component } from '@angular/core';
import { NavParams, NavController, LoadingController } from 'ionic-angular';
import { URL } from '../../url';

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

export class PDFContentPage {
  name: string;
  pdfSrc: string;
  zoom: number = 0.9;
  page: number = 1;
  totalPages: number;
  loading: any;

  constructor(
    public params: NavParams,
    public navCtrl: NavController,
    public loadingCtrl: LoadingController,
  ) {
    this.name = this.params.get('name');
    this.pdfSrc = URL.BASE_URL + this.params.get('url');

    this.loading = this.loadingCtrl.create({
      content: 'Loading pdf...',
      spinner: "crescent",
      dismissOnPageChange: false,
      duration: 5000
    });
    this.loading.present();
  }

  dismiss() {
    this.navCtrl.pop();
  }

  prevPage() {
    if (this.page > 1) {
      this.page--;
    }
  }
  nextPage() {
    if (this.page < this.totalPages) {
      this.page++;
    }
  }

  pdfDidLoad(pdf: any) {
    this.totalPages = pdf.numPages;
    console.log(this);
    console.log(pdf);
  }

  ionViewDidEnter() {
    this.loading.dismiss();
  }

}

[VadimDez]

You need to add to the constructor of PDFContentPage:

this.pdfDidLoad = this.pdfDidLoad.bind(this);

[nessgor]

It works!! thanks a lot !!