ngx-extended-pdf-viewer event failure on specific page - with page number

Question

<ngx-extended-pdf-viewer
  *ngIf="'assets/Service.pdf'"  
  [src]="'assets/Service.pdf'"
  [useBrowserLocale]="true"
  [showHandToolButton]="true"
  [handTool]="false"
  [showPrintButton]="false"
  [showDownloadButton]="false"
  [showSecondaryToolbarButton]="false"
  [showSidebarButton]="false"
  [showFindButton]="false"
  [showToolbar]="false"
  [showHandToolButton]="false"
  [showZoomButtons]="false"
  [showFindFuzzySearch]="true"
  [hidden]="isFullScreen"
  (pdfLoaded)=pdfLoaded($event);
  (pagesLoaded)=onPagesLoaded($event);
  (pageRender)=onPage($event);
  [(page)]="pageNumber"
  (textLayerRendered)=highlightWords1($event);
  [class]="'custom-pdf-viewer'">
</ngx-extended-pdf-viewer>

I am doing text highlighting in pdf based on my dynamic text received from backend. My text which is not exact to the pdf text, so with Lavenshtein distance algo finding the similarity match. which is able to find out page where maximum words finds. Now with pageNumber it is redirecting to the specific correct page but in textLayerRendered or any event getting another pageNumber in it.

I tried searchin for the solution not helped.

Answer 1

If I get you right, you calculate the page number in an event fired by ngx-extended-pdf-viewer, and setting `[pageNumber]="calculatedPageNumber()" doesn't work.

I can only guess, but I reckon there's an error message like ExpressionChangedAfterItHasBeenCheckedError in your console window.

Try setting the page number in a timeout. This way, you escape the change detection cycle of Angular. Using a timeout triggers a new change detection cycle and allows you to navigate to a new page.

setTimeout(() => this.pageNumber=calculatePageNumber());