[(page)] two way binding causes infinite loop

[timothyblue]

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

In chrome (haven't tested in other browsers), when you click click the up or down arrows in the input cell a few times quickly an infinite loop is created. It looks like the input value is not updated until after the page is rendered so there is some delay and then it gets re-updated.

For instance, if you start on page 1 and click up fast... 2, 3, 4, 5, 6, 7, 8, 9, 10, then it will start going 8, 10, 8, 10, 8, 10 over and over without any user input.

You can observe this behavior at https://vadimdez.github.io/ng2-pdf-viewer/ by uploading a multi-page document (mine is 82 pages) and then clicking the next button quickly, until you reach page 10 or so.

<div class="container-fluid doc-container">
  <ng-container *ngIf="docReady; else loading">
    <div class="doc-header">
      <div class="col-sm-5" id="paging">
        <input class="form-control" type="number" [(ngModel)]="page" [max]="totalPages">
      </div>
      <div class="col-sm-7">
        <app-zoom (zoomUpdated)="zoomUpdated($event)"></app-zoom>
      </div>
    </div>
  </ng-container>
  <div class="doc-content">
    <pdf-viewer
      [(page)]="page"
      [show-all]="true"
      [src]="url"
      [zoom]="zoomLevel"
      [render-text]="true"
      [original-size]="false"
      [stick-to-page]="true"
      (after-load-complete)="loadComplete($event)"
      class="viewer"
      style="display: block;"
    ></pdf-viewer>
  </div>
</div>
<ng-template #loading><div class="loading"></div></ng-template>

import { Component, OnDestroy, OnInit } from '@angular/core';
import { PDFDocumentProxy } from 'pdfjs-dist';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { DataService } from '../data.service';

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.css']
})
export class PdfViewerComponent implements OnInit, OnDestroy {
  private destroy = new Subject<void>();
  public url: string;
  public zoomLevel = 1;
  public docReady: boolean;
  public totalPages: number;
  public page: number;

  constructor(private service: DataService) {}

  ngOnInit() {
    this.service
      .getPdf()
      .pipe(takeUntil(this.destroy))
      .subscribe(x => (this.url = URL.createObjectURL(x)));
  }

  ngOnDestroy() {
    this.destroy.next();
    this.destroy.complete();
  }

  public zoomUpdated(zoomLevel: number) {
    this.zoomLevel = zoomLevel;
  }

  public loadComplete(pdf: PDFDocumentProxy) {
    this.totalPages = pdf.numPages;
    this.docReady = true;
  }
}

[VadimDez]

Fixed in 6.1.3

[marabu-edv]

Due to this fix, pageChange doesn't fire at all, unless one enters an invalid page number.

const orginalPage = _page;

 if (this._pdf) {
   _page = this.getValidPageNumber(_page);   // if _page is valid, it'll stay the same as orginalPage
 }

 if (orginalPage !== _page) { 
   this.pageChange.emit(_page);
 }