Syncfusion AI Assistant

How can I help you?

Text search in Angular PDF Viewer

17 Apr 20267 minutes to read

The text search feature in the Angular PDF Viewer locates and highlights matching content within a document. Enable or disable this capability with the following configuration.

Text Search

NOTE

The text search functionality requires importing TextSearch and adding it to PdfViewerModule. Otherwise, the search UI and APIs will not be accessible.

Text search features in UI

Real-time search suggestions while typing

Typing in the search box immediately surfaces suggestions that match the entered text. The list refreshes on every keystroke so users can quickly jump to likely results without completing the entire term.

Search suggestion popup

Select search suggestions from the popup

After typing in the search box, the popup lists relevant matches. Selecting an item jumps directly to the corresponding occurrence in the PDF.

Search results from popup

Dynamic Text Search for Large PDF Documents

Dynamic text search is enabled during the initial loading of the document when the document text collection has not yet been fully loaded in the background.

Dynamic text search in progress

Search text with the Match Case option

Enable the Match Case checkbox to limit results to case-sensitive matches. Navigation commands then step through each exact match in sequence.

Match case navigation

Search text without Match Case

Leave the Match Case option cleared to highlight every occurrence of the query, regardless of capitalization, and navigate through each result.

Search navigation without match case

Search a list of words with Match Any Word

Enable Match Any Word to split the query into separate words. The popup proposes matches for each word and highlights them throughout the document.

Match any word search results

Programmatic text Search

The Angular PDF Viewer provides options to toggle text search feature and APIs to customize the text search behavior programmatically.

Enable or Disable Text Search

Use the following snippet to enable or disable text search features

import { Component, ViewChild } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  NavigationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  MagnificationService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  providers: [
    ToolbarService,
    NavigationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    MagnificationService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService,
  ],
  template: `
    <ejs-pdfviewer
      #pdfviewer
      id="PdfViewer"
      [enableTextSearch]="true"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height: 100%; width: 100%; display: block"
    >
    </ejs-pdfviewer>
  `,
})
export class AppComponent {
  @ViewChild('pdfviewer')
  public pdfviewerObj!: PdfViewerComponent;

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
}

Programmatic text search

While the PDF Viewer toolbar offers an interactive search experience, you can also trigger and customize searches programmatically by calling the following APIs in textSearch module.

searchText

Use the searchText method to start a search with optional filters that control case sensitivity and whole-word behavior.

// searchText(text: string, isMatchCase?: boolean)
this.pdfviewerObj.textSearch.searchText('search text', false);

Set the isMatchCase parameter to true to perform a case-sensitive search that mirrors the Match Case option in the search panel.

// This will only find instances of "PDF" in uppercase.
this.pdfviewerObj.textSearch.searchText('PDF', true);

searchNext

searchNext method searches the next occurrence of the current query from the active match.

// searchText(text: string, isMatchCase?: boolean)
this.pdfviewerObj.textSearch.searchNext();

searchPrevious

searchPrevious API searches the previous occurrence of the current query from the active match.

// searchText(text: string, isMatchCase?: boolean)
this.pdfviewerObj.textSearch.searchPrevious();

cancelTextSearch

cancelTextSearch method cancels the current text search and removes the highlighted occurrences from the PDF Viewer.

// searchText(text: string, isMatchCase?: boolean)
this.pdfviewerObj.textSearch.cancelTextSearch();

Complete Example

Use the following code snippet to implement text search using SearchText API

import { Component, ViewChild } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  NavigationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  MagnificationService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService,
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  providers: [
    ToolbarService,
    NavigationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    MagnificationService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService,
  ],
  template: `
    <button (click)="searchText()" style="margin: 8px;">
      Search Text
    </button>
    <button (click)="previousSearch()" style="margin: 8px;">
      Previous Search
    </button>
    <button (click)="nextSearch()" style="margin: 8px;">
      Next Search
    </button>
    <button (click)="cancelSearch()" style="margin: 8px;">
      Cancel Search
    </button>
    <ejs-pdfviewer
      #pdfviewer
      id="PdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height: calc(100vh - 50px); width: 100%; display: block"
    >
    </ejs-pdfviewer>
  `,
})
export class AppComponent {
  @ViewChild('pdfviewer')
  public pdfviewerObj!: PdfViewerComponent;

  public document: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  public resource: string =
    'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';

  searchText(): void {
    this.pdfviewerObj.textSearch.searchText('pdf', false);
  }

  previousSearch(): void {
    this.pdfviewerObj.textSearch.searchPrevious();
  }

  nextSearch(): void {
    this.pdfviewerObj.textSearch.searchNext();
  }

  cancelSearch(): void {
    this.pdfviewerObj.textSearch.cancelTextSearch();
  }
}

Expected result: the viewer highlights occurrences of pdf and navigation commands jump between matches.

View Sample in GitHub

See also