Custom thumbnail with checkboxes for multi-page selection

[Shirosaki-ZA]

Hello,

I am trying to implement custom thumbnails as detailed here. The modifications I'm making to the example is changing the radio buttons to checkboxes, so that multiple pages can be selected.

I'm struggling to implement change detection on the check boxes.

This is the code for my component:
HTML:

<ngx-extended-pdf-viewer
	[src]="selectedDocument.fileSrc" [contextMenuAllowed]="false" [textLayer]="true"
	[showToolbar]="true" [showSidebarButton]="false" [showFindButton]="true"
	[showPagingButtons]="true" [showZoomButtons]="true"
	[showPresentationModeButton]="true" [showOpenFileButton]="false"
	[showPrintButton]="false" [showDownloadButton]="false"
	[showSecondaryToolbarButton]="true" [showHandToolButton]="true"
	[showScrollingButton]="true" [showSpreadButton]="true"
	[showPropertiesButton]="false"
	height="calc(95vh - 145px)"
	[customThumbnail]="radiobuttonThumbnail"
	(thumbnailDrawn)="onThumbnailDrawn($event)">
</ngx-extended-pdf-viewer>

<ng-template #radiobuttonThumbnail>
	<a class="pdf-viewer-template">
		<div class="thumbnail" data-page-number="PAGE_NUMBER" style="border: none">
			<input id="thumbnail-cbx-PAGE_NUMBER" data-page-number="PAGE_NUMBER"
				class="thumbnail-radiobutton" type="checkbox"
				style="top: 75px; right: 25px; position: relative; transform: scale(1.5)" />
			<div class="thumbnail-text"></div>
			<div class="image-container"
				style="width: var(--thumbnail-width); height: var(--thumbnail-height)">
				<img class="thumbnailImage" />
			</div>
			<div style="margin-top: -30px; margin-left: auto; margin-right: auto; text-align: center; width: 25px; height: 25px; border-radius: 50%; background-color: #e65200;
				color: white; line-height: 25px;">
				#PAGE_NUMBER
			</div>
		</div>
	</a>
</ng-template>

TS:

constructor(
    private changeDetectorRef: ChangeDetectorRef,
) { }

onThumbnailDrawn(thumbnailEvent: PdfThumbnailDrawnEvent): void {
	const thumbnail = thumbnailEvent.thumbnail;
	const radiobutton = thumbnail.querySelector('input.thumbnail-radiobutton') as HTMLInputElement;
	radiobutton.checked = false;
	radiobutton.onclick = () => {
	  let page: number = Number(radiobutton.dataset['pageNumber']);
	  console.log("<---thumbnail.radiobutton---onclick--->" + page);
	  console.log("<---thumbnail.radiobutton---onclick--->" + radiobutton.checked);
	  this.changeDetectorRef.detectChanges();
	}
}

The check boxes are visible as expected, but the UI doesn't update when it's clicked. The page number printed to the console is correct, but the checked property is always outputted as true, even though I never set it to true, and even when the checkbox is clicked a second time.

What am I doing wrong?

[stephanrauh]

Which version of ngx-extended-pdf-viewer are you using? The documentation on https://pdfviewer.net refers to version 21.0.0, which is currently only available as an alpha version. Unfortunately, there were breaking change since the previous version, so it's really annoying that publishing the final version 21 takes to long.

[Shirosaki-ZA]

I'm using version 14.5.2 of ngx-extended-pdf-viewer (and 14.2.8 of angular). Is the only solution to upgrade to version 21?

[stephanrauh]

Oh, that's a bit older than I expected. Well, I'm short on time, so version 21 is the only version I support.

The problem is that the API has changed in the meantime, and the showcase only shows the most current API. However, you can go back in time and check out an old version of the showcase. The custom thumbnails in version 14.5.2 should be roughly in this commit: https://github.com/stephanrauh/extended-pdf-viewer-showcase/tree/dcd438e8a102e6bebb4a3b84af096943adf786a7/src/app/extended-pdf-viewer/custom-thumbnails. Maybe comparing the old version of my demo to your source code helps you to spot the problem.

[Shirosaki-ZA]

Awesome, thanks. Exactly what I needed!