(pageChange) event not getting emitted - Single Page Viewer

[priyankamohile]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [x] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

Hi @VadimDez , I've integrated the ng2-pdf-viewer into my application (version : 9.0.0). I've tried to use the pageChange event within my PDF Viewer in this manner -

HTML :

<pdf-viewer [src]="pageSrc" [autoresize]="true" [original-size]="false" [show-all]="false" [(page)]="page" [zoom]="zoompercent" [render-text]="false" [stick-to-page]="false" (after-load-complete)="onComplete($event)" (pageChange)="onPageChange($event)"></pdf-viewer>

Typescript :

onPageChange(page: number) { console.log("onPageChange : " + page); }

I am displaying one page at a time, and on click of next/previous page, the page variable is updated accordingly. However, I do not receive the pageChange callback. The callback is working fine (getting called) only when I set [show-all]="true", in case of a multi page viewer. In case of a single page viewer, it does not get triggered at all, even when we access a different page and the page variable is updated. Could it be possible that the event emitter is not working in case of a single page viewer ?

Following are the threads I have gone through before raising a request / issue here -

#73
#223

I debugged the code and noticed that on the 'pdf-viewer.component.ts', - https://github.com/VadimDez/ng2-pdf-viewer/blob/master/src/app/pdf-viewer/pdf-viewer.component.ts
under setupSinglePageViewer(), while setting up the event for 'pagechanging', the event is not being emitted.

fromEvent(eventBus, 'pagechanging') .pipe(takeUntil(this.destroy$)) .subscribe(({ pageNumber }) => { if (pageNumber !== this._page) { this.page = pageNumber; } });

Whereas in case of setupMultiPageViewer(),

fromEvent(eventBus, 'pagechanging') .pipe(takeUntil(this.destroy$)) .subscribe(({ pageNumber }) => { if (this.pageScrollTimeout) { clearTimeout(this.pageScrollTimeout); } this.pageScrollTimeout = window.setTimeout(() => { this._latestScrolledPage = pageNumber; this.pageChange.emit(pageNumber); }, 100); });

The fix that I tried and tested at my end was -

setupSinglePageViewer() { assign(PDFJS, 'disableTextLayer', !this._renderText); const eventBus = createEventBus(PDFJSViewer, this.destroy$); fromEvent(eventBus, 'pagechanging') .pipe(takeUntil(this.destroy$)) .subscribe(({ pageNumber }) => { if (pageNumber !== this._page) { this.page = pageNumber; } this.pageChange.emit(pageNumber); });

This worked fine. Please help me to confirm if my understanding is correct, so that we can work together to have this issue resolved.

[priyankamohile]

Hi @VadimDez ,
I hope you are well.
I've raised a pull request for your review which I hope would fix this issue - #921

As part of testing, I cloned the repo, added my code changes and re-ran it on localhost to make sure there are no breaking changes.

[VadimDez]

Thanks @priyankamohile

[daniela-alves]

Is not possible to apply the fix for 7.0.1 version?
I can´t update the version or angular