Use PDFSinglePageViewer instead of PDFPageView

The PDFFindController of PDF.js wasn't able to search on a PDFPageView,
replacing it with the PDFSinglePageViewer solved the issue.
This change unfortunately introduced some major changes in the inner functioning
of the pdf-viewer.

src/app/app.component.html

@@ -68,6 +68,11 @@ <h2>Angular 5+ PDF Viewer</h2>
           </mat-slide-toggle>
       </div>
 
+      <div class="mb">
+        <input #queryInp id="pdfQueryInput" type="text" placeholder="Search" [value]="pdfQuery"
+               (change)="searchQueryChanged($event.target.value)" (keyup.enter)="searchQueryChanged(queryInp.value)">
+      </div>
+
       <div class="mb">
           <button (click)="incrementZoom(-0.1)" mat-button type="button">
               -

src/app/app.component.ts

@@ -1,10 +1,10 @@
 /**
  * Created by vadimdez on 21/06/16.
  */
-import { Component, ViewChild } from '@angular/core';
-import { PDFProgressData, PDFDocumentProxy, PDFSource } from './pdf-viewer/pdf-viewer.module';
+import {Component, OnChanges, ViewChild} from '@angular/core';
+import {PDFProgressData, PDFDocumentProxy, PDFSource} from './pdf-viewer/pdf-viewer.module';
 
-import { PdfViewerComponent } from './pdf-viewer/pdf-viewer.component';
+import {PdfViewerComponent} from './pdf-viewer/pdf-viewer.component';
 
 @Component({
   moduleId: module.id,
@@ -41,6 +41,7 @@ export class AppComponent {
   fitToPage = false;
   outline: any[];
   isOutlineShown = false;
+  pdfQuery = '';
 
   @ViewChild(PdfViewerComponent) private pdfComponent: PdfViewerComponent;
 
@@ -53,7 +54,7 @@ export class AppComponent {
     xhr.onload = (e: any) => {
       console.log(xhr);
       if (xhr.status === 200) {
-        const blob = new Blob([xhr.response], { type: 'application/pdf' });
+        const blob = new Blob([xhr.response], {type: 'application/pdf'});
         this.pdfSrc = URL.createObjectURL(blob);
       }
     };
@@ -139,11 +140,11 @@ export class AppComponent {
     let newSrc;
 
     if (this.pdfSrc instanceof ArrayBuffer) {
-      newSrc = { data: this.pdfSrc };
+      newSrc = {data: this.pdfSrc};
     } else if (typeof this.pdfSrc === 'string') {
-      newSrc = { url: this.pdfSrc };
+      newSrc = {url: this.pdfSrc};
     } else {
-      newSrc = { ...this.pdfSrc };
+      newSrc = {...this.pdfSrc};
     }
 
     newSrc.password = password;
@@ -191,4 +192,19 @@ export class AppComponent {
   pageRendered(e: CustomEvent) {
     console.log('(page-rendered)', e);
   }
+
+  searchQueryChanged(newQuery: string) {
+    if (newQuery !== this.pdfQuery) {
+      this.pdfQuery = newQuery;
+      this.pdfComponent.pdfFindController.executeCommand('find', {
+        query: this.pdfQuery,
+        highlightAll: true
+      });
+    } else {
+      this.pdfComponent.pdfFindController.executeCommand('findagain', {
+        query: this.pdfQuery,
+        highlightAll: true
+      });
+    }
+  }
 }