ngx-extended-pdf-viewer

When deciding how to display PDF files in an Angular application, consider your requirements for UI complexity and browser support:

• ngx-extended-pdf-viewer: Best if you need a full-featured, "fancy" UI including a menu, sidebar, and advanced controls. It supports Internet Explorer 11 and provides extensive attributes, events (e.g., document loaded, page rendered), and two-way binding for properties like page number and zoom factor.
• ng2-pdf-viewer: Best for a "no-nonsense" approach where you only need to render the plain PDF file without a toolbar, thumbnails, or extra UI elements.
• ng2-pdfjs-viewer: Best if you need to display multiple PDF files side-by-side or open them in new tabs/windows. It uses an iFrame-based approach to wrap the PDF viewer, allowing parameter passing via the URL.
• Native Browser Support: Use the <object> tag for a lightweight solution if you do not need to support older browsers like Internet Explorer or require a standardized embedding API.
• Commercial Solutions: If you need to modify PDF files (editing content), look into professional tools like PDFTron or the commercial version of ej2-angular-pdfviewer.

The ngx-extended-pdf-viewer provides two distinct ways to programmatically trigger search functionality via the NgxExtendedPdfViewerService:

1. User Find Controller: This is part of the standard UI. When used, the search state is reflected in the viewer's UI components. Use this when you want the user to see the search bar and current find status.
2. API Find Controller (Secondary Find Controller): This is designed for programmatic use. It allows developers to perform searches without interfering with the user's own manual search activity in the UI.

Both are accessed by injecting NgxExtendedPdfViewerService and calling the .find() method, toggling the useSecondaryFindcontroller option.

// Use User Find Controller (UI reflected)
this.ngxExtendedPdfViewerService.find(searchText, {
  useSecondaryFindcontroller: false
});

// Use API Find Controller (Programmatic, non-interfering)
this.ngxExtendedPdfViewerService.find(searchText, {
  useSecondaryFindcontroller: true
});

For logic-based customization that goes beyond static HTML (such as changing colors based on page content or adding event listeners), use the (thumbnailDrawn) event.

This event provides a PdfThumbnailDrawnEvent object containing the thumbnail DOM element. You can use standard DOM APIs (querySelector, style, classList) to manipulate the thumbnail after it has been rendered.

Calling Angular Code from (thumbnailDrawn): Because the thumbnail drawing happens outside of Angular's standard change detection cycle, if you modify component state inside the (thumbnailDrawn) handler, you must manually trigger change detection using ChangeDetectorRef.detectChanges() or ChangeDetectorRef.markForCheck() (unless you are using ngZone).

public onThumbnailDrawn(thumbnailEvent: PdfThumbnailDrawnEvent): void {
  const thumbnail = thumbnailEvent.thumbnail;
  const page = thumbnailEvent.pageNumber; // Access page number from event

  // Example: Manipulate DOM directly
  const overlay = thumbnail.querySelector('.image-container') as HTMLElement;
  if (page <= 2) {
    overlay.style.backgroundColor = '#0000FF40';
  }

  // Example: Add native DOM event listeners
  overlay.ondblclick = () => {
    this.performAngularAction();
  };
}