Pdf view blocked when we open more than one at the same time

[Gabrielle-anne]

Hello,
I am using this library in an application, and we use a resizing for the PDFs (pages are not all of the same size, and it must display each layer like it's in full screen (they have to take the max place they can in the place allowed)), unfortunately we do have a problem when we open two PDFs at the same time, the second one return an error :

ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '100%'. Current value: 'page-fit'.

And we can't navigate (we must refresh the page), the PDF is blocked on the first page(for the second and the other nexts only).

 pageChange (page: number): void {
    if (this.pdf.pageViewMode === 'single') {
      this.zoom = '100%'
    }
  }
  zoomChange (event: any): void {
    if (this.pdf.pageViewMode === 'single' && this.zoom !== 'page-fit') {
      this.zoom = 'page-fit' // The errors say the component didn't fully load
      //this.cd.detectChanges() // when i remove this line the error appears
    }
  }

<div class="reader">
  <ngx-extended-pdf-viewer
    #pdfViewer
    [src]="safePdfUrl"
    [useBrowserLocale]="true"
    (pageChange)="pageChange($event)"
    (zoomChange)="zoomChange($event)"
    pageViewMode="single"
    [zoom]="zoom"
    [showBorders]="false"
    [sidebarVisible]="true"
  ></ngx-extended-pdf-viewer>
</div>

I tried timeout, ngOnInit, ngOnCheck, try and refresh if errors occur ..... i'm currently totally clueless.
Can somebody help me ?
thanks a lot

[stephanrauh]

Are you displaying two PDFs side-by-side? That won't work because pdf.js pollutes the global namespace. You can solve this by putting the PDF viewers into iFrames. I've shown this approach here: https://pdfviewer.net/extended-pdf-viewer/side-by-side

However, your error message doesn't really match this scenario. Last time I tried, it was simply impossible to display two instances of ngx-extended-pdf-viewer on the same page. Or has it become better?

[Gabrielle-anne]

Hello,
I need a full-screen mode without a real full screen, and my pages don't have the same shape.
And when I change the page I need to fit the page, it doesn't fit properly event if I say page-fit, we tried to make a trick by using zoomChange()
When we change the page, the event "pageRndered()" is not called.
Thanks for your helpful support,
BTW your link was really interesting.

[stephanrauh]

The secret (and ugly) solution to get rid of ExpressionChangedAfterItHasBeenCheckedError is adding a timeout:

zoomChange(event: any) {
    setTimeout(() => {
      if(this.zoom !== 'page-fit') {
        this.zoom = 'page-fit'
      }
    }
  }

Of course, this requires you to use zone.js. Recent Angular promises to work without zone.js- but then, ngx-extended-pdf-viewer currently requires zone.js, so that shouldn't be a problem.

[Gabrielle-anne]

Effectively it removes the ExpressionChangedAfterItHasBeenCheckedError, but we are still blocked on the first page on the second PDF

[stephanrauh]

I've managed to reproduce your issue once, but for some reason, it doesn't always show. However, I believe setting the zoom to 100% reduces the size of the pages, and that, in turn, confuses the algorithm because the previous page is visible again and causes the algorithm to jump back to page 1. In single-page mode, this means that only page 1 remains visible.

Based on that theory, I've simplified your algorithm and improved it to avoid flickering when the zoom is set to 100%. It worked flawlessly in my tests:

<ngx-extended-pdf-viewer
[src]="src"
(pageChange)="pageChange($event)"
(currentZoomFactor)="currentZoomFactorChange($event)" <!-- capture the percentage -->
[showZoomButtons]="true"
[zoom]="zoom"
[showBorders]="false"
[pageViewMode]="'single'"
>
</ngx-extended-pdf-viewer>

import { Component } from '@angular/core';

@Component({
  selector: 'app-pdf',
  templateUrl: './pdf.component.html',
  styleUrls: ['./pdf.component.css'],
})
export class PdfComponent {
  public page = 1;
  public zoom: number | string = 'page-fit';
  public currentZoomFactor: number;
  public src = 'assets/test.pdf'; // Path to your PDF document.
  public spreadMode: 'off' | 'even' | 'odd' = 'off';

  public pageChange(page: number): void {
    console.log('Page changed to: ' + page);
    this.zoom = this.currentZoomFactor;
    setTimeout(() => {
      this.zoom = 'page-fit';
    }, 0);
  }

  public currentZoomFactorChange(currentZoomFactor: number): void {
    console.log('Current zoom factor changed to: ' + currentZoomFactor);
    this.currentZoomFactor = currentZoomFactor;
  }
}

[Gabrielle-anne]

Hello,
I try your solution but I think I lost something because it’s not working.
When I test the solution,
I still have the same bug : I can’t change the pages on the second pdf without reloading, but on the first one all is working perfectly.
The bug appears when I do this :
’openPdf() {
window.open('/pdf', '_blank')
window.open('/pdf', '_blank')
window.open('/pdf', '_blank')
}’
I tried this : test 4.zip
Is there something I did wrong ?
Thank you very much, for your help.