Syncfusion AI Assistant

How can I help you?

Events in Angular PDF Viewer

13 Feb 202624 minutes to read

The PDF Viewer component raises events for document life cycle, navigation, annotations, forms, context menus, comments, printing, bookmarks, downloads and exports, custom keyboard commands, text search and selection, hyperlinks, and signatures. This reference describes each event, its arguments, and practical examples for common integration scenarios.

The following table lists commonly used events supported by the PDF Viewer component:

Event	Description
`bookmarkClick`	Triggers when a bookmark item is clicked in the bookmark panel.
`buttonFieldClick`	Triggers when a button form field is clicked.
`commentAdd`	Triggers when a comment is added to the comment panel.
`commentDelete`	Triggers when a comment is deleted from the comment panel.
`commentEdit`	Triggers when a comment is edited in the comment panel.
`commentSelect`	Triggers when a comment is selected in the comment panel.
`commentStatusChanged`	Triggers when a comment’s status changes in the comment panel.
`created`	Triggers during the creation of the PDF Viewer component.
`customContextMenuBeforeOpen`	Fires before the custom context menu opens.
`customContextMenuSelect`	Fires when a custom context menu item is selected.
`documentLoad`	Triggers while loading a document into the PDF Viewer.
`documentLoadFailed`	Triggers when document loading fails.
`documentUnload`	Triggers when the document is closed.
`downloadEnd`	Triggers after a document is downloaded.
`downloadStart`	Triggers when the download action is initiated.
`exportFailed`	Triggers when exporting annotations fails.
`exportStart`	Triggers when exporting annotations starts.
`exportSuccess`	Triggers when annotations are exported successfully.
`extractTextCompleted`	Triggers when text extraction is completed.
`hyperlinkClick`	Triggers when a hyperlink is clicked.
`hyperlinkMouseOver`	Triggers when hovering over a hyperlink.
`importFailed`	Triggers when importing annotations fails.
`importStart`	Triggers when importing annotations starts.
`importSuccess`	Triggers when annotations are imported successfully.
`keyboardCustomCommands`	Triggers when customized keyboard command keys are pressed.
`moveSignature`	Triggers when a signature is moved across the page.
`pageChange`	Triggers when the current page number changes.
`pageClick`	Triggers when a mouse click occurs on a page.
`pageMouseover`	Triggers when moving the mouse over a page.
`pageOrganizerSaveAs`	Triggers when a `save as` action is performed in the page organizer.
`pageRenderComplete`	Triggers after a page finishes rendering.
`pageRenderInitiate`	Triggers when page rendering begins.
`printEnd`	Triggers when a print action is completed.
`printStart`	Triggers when a print action is initiated.
`removeSignature`	Triggers when a signature is removed.
`resizeSignature`	Triggers when a signature is resized.
`resourcesLoaded`	Triggers after PDFium resources are loaded.
`signaturePropertiesChange`	Triggers when signature properties are changed.
`signatureSelect`	Triggers when a signature is selected.
`signatureUnselect`	Triggers when a signature is unselected.
`textSearchComplete`	Triggers when a text search is completed.
`textSearchHighlight`	Triggers when the searched text is highlighted.
`textSearchStart`	Triggers when a text search is initiated.
`textSelectionEnd`	Triggers when text selection is complete.
`textSelectionStart`	Triggers when text selection is initiated.
`thumbnailClick`	Triggers when a thumbnail is clicked.
`toolbarClick`	Triggers when a toolbar item is clicked.
`validateFormFields`	Triggers when form field validation fails.
`zoomChange`	Triggers when the magnification value changes.

Note: For annotation and signature events, see the dedicated Annotations Events topic.

bookmarkClick

The bookmarkClick event triggers when a bookmark item is clicked in the bookmark panel.

Event arguments: BookmarkClickEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onBookmarkClick(args: any): void {
    console.log(`Bookmark clicked: ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (bookmarkClick)="onBookmarkClick($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

toolbarClick

The toolbarClick event triggers when a toolbar item is clicked. Use this event to handle actions based on the clicked item’s id or name.

Event arguments: ClickEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onToolbarClick(args: any): void {
    console.log(`Toolbar item clicked: ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (toolbarClick)="onToolbarClick($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

validateFormFields

The validateFormFields event triggers when form field validation fails, typically before a download or submit action proceeds. Use this event to inspect which required fields are empty and show custom messages or block application logic if needed.

Event arguments: ValidateFormFieldsArgs
- name: Event name
- documentName: Current document name
- formField: The last interacted field’s data (if applicable)
- nonFillableFields: Array detailing required/invalid fields

When it triggers

Add a form field and mark it Required (UI: right‑click field > Properties > Required).
Leave the field empty and click Download. The event fires and provides the list of fields that failed validation.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
  public enableFormFieldsValidation = true;

  public onValidateFormFields(args: any): void {
    console.log('form field event name:', args.name);
    console.log('form field document name:', args.documentName);
    console.log('form field data:', args.formField);
    console.log('non fillable form field details:', args.nonFillableFields);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  [enableFormFieldsValidation]="enableFormFieldsValidation"
  (validateFormFields)="onValidateFormFields($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

Tip

To require a field programmatically, set isRequired: true when creating or editing the field via Form Designer APIs.

zoomChange

The zoomChange event triggers when the magnification value changes.

Event arguments: ZoomChangeEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onZoomChange(args: any): void {
    console.log(`Zoom changed to: ${args.zoomValue}%`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (zoomChange)="onZoomChange($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

buttonFieldClick

The buttonFieldClick event triggers when a button form field is clicked.

Event arguments: ButtonFieldClickEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onButtonFieldClick(args: any): void {
    console.log(`Button field clicked. Name: ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (buttonFieldClick)="onButtonFieldClick($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

commentAdd

The commentAdd event triggers when a comment is added in the comment panel.

Event arguments: CommentEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCommentAdd(args: any): void {
    console.log(`Comment added. Id: ${args.id}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (commentAdd)="onCommentAdd($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

commentDelete

The commentDelete event triggers when a comment is deleted in the comment panel.

Event arguments: CommentEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCommentDelete(args: any): void {
    console.log(`Comment deleted. Id: ${args.id}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (commentDelete)="onCommentDelete($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

commentEdit

The commentEdit event triggers when a comment is edited in the comment panel.

Event arguments: CommentEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCommentEdit(args: any): void {
    console.log(`Comment edited. Id: ${args.id}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (commentEdit)="onCommentEdit($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

commentSelect

The commentSelect event triggers when a comment is selected in the comment panel.

Event arguments: CommentEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCommentSelect(args: any): void {
    console.log(`Comment selected. Id: ${args.id}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (commentSelect)="onCommentSelect($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

commentStatusChanged

The commentStatusChanged event triggers when a comment status is changed in the comment panel.

Event arguments: CommentEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCommentStatusChanged(args: any): void {
    console.log(`Comment status changed. Id: ${args.id}, Status: ${args.status}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (commentStatusChanged)="onCommentStatusChanged($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

created

The created event is triggered during the creation of the PDF Viewer component.

Event arguments: void.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCreated(): void {
    console.log('PDF Viewer created');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (created)="onCreated()"
  style="height: 600px"
>
</ejs-pdfviewer>

customContextMenuBeforeOpen

The customContextMenuBeforeOpen event fires just before the context menu is shown. Use it to show or hide items based on the current state (for example, only show search items when text is selected).

Event arguments: CustomContextMenuBeforeOpenEventArgs
- name: Event name
- ids: Array of menu item ids that will be shown; remove ids to hide items for this open

Example:

// app.ts
import { Component, ViewChild } from '@angular/core';
import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  @ViewChild('pdfViewer', { static: false }) pdfViewer!: PdfViewerComponent;

  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public menuItems: any[] = [
    {
      text: 'SEARCH_ON_WEB',
      id: 'web_search',
      iconCss: 'e-icons e-search',
      items: [
        { text: 'SEARCH_IN_GOOGLE_IMAGE', id: 'web_search_images' },
        { text: 'SEARCH_IN_WIKIPEDIA', id: 'web_search_wikipedia' },
        { text: 'SEARCH_IN_YOUTUBE', id: 'web_search_youtube' },
        { text: 'SEARCH_GOOGLE', id: 'web_search_google' },
      ],
    },
    { id: 'web_search_separator', separator: true },
  ];

  public onCustomContextMenuBeforeOpen(args: any): void {
    console.log(`Before open context menu at page ${args.name}`);
  }

  public onDocumentLoad(): void {
    if (this.pdfViewer) {
      this.pdfViewer.addCustomMenu(this.menuItems, false, false);
    }
  }
}

<!-- app.html -->
<ejs-pdfviewer
  #pdfViewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (customContextMenuBeforeOpen)="onCustomContextMenuBeforeOpen($event)"
  (documentLoad)="onDocumentLoad()"
  style="height: 600px"
>
</ejs-pdfviewer>

customContextMenuSelect

The customContextMenuSelect event fires when a custom menu item is clicked. Use it to branch logic by the clicked item’s id.

Event arguments: CustomContextMenuSelectEventArgs.
name: Event name
id: The id of the clicked menu item

Example:

// app.ts
import { Component, ViewChild } from '@angular/core';
import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  @ViewChild('pdfViewer', { static: false }) pdfViewer!: PdfViewerComponent;

  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public menuItems: any[] = [
    {
      text: 'SEARCH_ON_WEB',
      id: 'web_search',
      iconCss: 'e-icons e-search',
      items: [
        { text: 'SEARCH_IN_GOOGLE_IMAGE', id: 'web_search_images' },
        { text: 'SEARCH_IN_WIKIPEDIA', id: 'web_search_wikipedia' },
        { text: 'SEARCH_IN_YOUTUBE', id: 'web_search_youtube' },
        { text: 'SEARCH_GOOGLE', id: 'web_search_google' },
      ],
    },
    { id: 'web_search_separator', separator: true },
  ];

  public onCustomContextMenuSelect(args: any): void {
    console.log(`Context menu item selected: ${args.name}`);
  }

  public onDocumentLoad(): void {
    if (this.pdfViewer) {
      this.pdfViewer.addCustomMenu(this.menuItems, false, false);
    }
  }
}

<!-- app.html -->
<ejs-pdfviewer
  #pdfViewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (customContextMenuSelect)="onCustomContextMenuSelect($event)"
  (documentLoad)="onDocumentLoad()"
  style="height: 600px"
>
</ejs-pdfviewer>

documentLoad

The documentLoad event occurs after a document is successfully loaded and parsed.

Event arguments: LoadEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onDocumentLoad(args: any): void {
    console.log(`Document loaded: page count = ${args.pageData}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (documentLoad)="onDocumentLoad($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

documentLoadFailed

The documentLoadFailed event triggers when loading a document fails.

Event arguments: LoadFailedEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/invalid.pdf';

  public onDocumentLoadFailed(args: any): void {
    console.log(`Load failed. Error: ${args.documentName}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  (documentLoadFailed)="onDocumentLoadFailed($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

documentUnload

The documentUnload event triggers when closing the current document.

Event arguments: UnloadEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onDocumentUnload(): void {
    console.log('Document unloaded');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (documentUnload)="onDocumentUnload()"
  style="height: 600px"
>
</ejs-pdfviewer>

downloadEnd

The downloadEnd event triggers after a document download completes.

Event arguments: DownloadEndEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onDownloadEnd(args: any): void {
    console.log(`Download finished. File name: ${args.fileName}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (downloadEnd)="onDownloadEnd($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

downloadStart

The downloadStart event triggers when the download operation is initiated.

Event arguments: DownloadStartEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onDownloadStart(): void {
    console.log('Download started');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (downloadStart)="onDownloadStart()"
  style="height: 600px"
>
</ejs-pdfviewer>

exportFailed

The exportFailed event triggers when exporting annotations fails.

Event arguments: ExportFailureEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onExportFailed(args: any): void {
    console.log(`Export failed: ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (exportFailed)="onExportFailed($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

exportStart

The exportStart event triggers when exporting annotations starts.

Event arguments: ExportStartEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onExportStart(): void {
    console.log('Export started');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (exportStart)="onExportStart()"
  style="height: 600px"
>
</ejs-pdfviewer>

exportSuccess

The exportSuccess event triggers when annotations are exported successfully.

Event arguments: ExportSuccessEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import { ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onExportSuccess(): void {
    console.log('Export success');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (exportSuccess)="onExportSuccess()"
  style="height: 600px"
>
</ejs-pdfviewer>

extractTextCompleted

The extractTextCompleted event triggers when text extraction completes.

Event arguments: ExtractTextCompletedEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onExtractTextCompleted(args: any): void {
    console.log(`Extracted text length: ${(args.documentTextCollection || '').length}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (extractTextCompleted)="onExtractTextCompleted($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

hyperlinkClick

The hyperlinkClick event triggers when a hyperlink is clicked.

Event arguments: HyperlinkClickEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onHyperlinkClick(args: any): void {
    console.log(`Hyperlink clicked: ${args.hyperlink}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (hyperlinkClick)="onHyperlinkClick($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

hyperlinkMouseOver

The hyperlinkMouseOver event triggers when hovering over a hyperlink.

Event arguments: HyperlinkMouseOverArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onHyperlinkMouseOver(args: any): void {
    console.log(`Hyperlink hover at page: ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (hyperlinkMouseOver)="onHyperlinkMouseOver($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

importFailed

The importFailed event triggers when importing annotations fails.

Event arguments: ImportFailureEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onImportFailed(args: any): void {
    console.log(`Import failed: ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (importFailed)="onImportFailed($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

importStart

The importStart event triggers when importing annotations starts.

Event arguments: ImportStartEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onImportStart(): void {
    console.log('Import started');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (importStart)="onImportStart()"
  style="height: 600px"
>
</ejs-pdfviewer>

importSuccess

The importSuccess event triggers when annotations are imported successfully.

Event arguments: ImportSuccessEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onImportSuccess(): void {
    console.log('Import success');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (importSuccess)="onImportSuccess()"
  style="height: 600px"
>
</ejs-pdfviewer>

keyboardCustomCommands

The keyboardCustomCommands event triggers when customized keyboard command keys are pressed.

Event arguments: KeyboardCustomCommandsEventArgs.
- name: Event name
- keyboardCommand: The command metadata raised by Command Manager

When it triggers

After registering gestures in commandManager.keyboardCommand. For example, pressing Shift + Alt + G or Shift + Alt + H triggers the event. Use this event to handle custom keyboard shortcuts.

Refer to Keyboard interaction for details about adding and handling custom shortcut keys.
Example:

// app.ts
import { Component, ViewChild } from '@angular/core';
import { PdfViewerComponent, ToolbarService, MagnificationService, NavigationService, LinkAnnotationService, ThumbnailViewService, BookmarkViewService, TextSelectionService, AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  @ViewChild('pdfViewer', { static: false }) pdfViewer!: PdfViewerComponent;

  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onCreated(): void {
    if (this.pdfViewer) {
      const PdfKeys: any = (window as any).PdfKeys || {};
      const ModifierKeys: any = (window as any).ModifierKeys || {};
      (this.pdfViewer as any).commandManager = {
        keyboardCommand: [
          { name: 'customCopy', gesture: { pdfKeys: PdfKeys.G, modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt } },
          { name: 'customPaste', gesture: { pdfKeys: PdfKeys.H, modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt } },
          { name: 'customCut', gesture: { pdfKeys: PdfKeys.Z, modifierKeys: ModifierKeys.Control } },
          { name: 'customSelectAll', gesture: { pdfKeys: PdfKeys.E, modifierKeys: ModifierKeys.Control } },
        ],
      };
    }
  }

  public onKeyboardCustomCommands(args: any): void {
    console.log('Custom command triggered:', args);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  #pdfViewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (created)="onCreated()"
  (keyboardCustomCommands)="onKeyboardCustomCommands($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

moveSignature

The moveSignature event triggers when a signature is moved across the page.

Event arguments: MoveSignatureEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onMoveSignature(args: any): void {
    console.log(`Signature moved on page ${args.id}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (moveSignature)="onMoveSignature($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

pageChange

The pageChange event triggers when the current page number changes (for example, via scrolling or navigation controls).

Event arguments: PageChangeEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPageChange(args: any): void {
    console.log(`Page changed from ${args.previousPageNumber} to ${args.currentPageNumber}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (pageChange)="onPageChange($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

pageClick

The pageClick event triggers when a mouse click occurs on a page.

Event arguments: PageClickEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPageClick(args: any): void {
    console.log(`Page ${args.pageNumber} clicked at (${args.x}, ${args.y})`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (pageClick)="onPageClick($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

pageMouseover

The pageMouseover event triggers when the mouse moves over a page.

Event arguments: PageMouseoverEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPageMouseover(args: any): void {
    console.log(`Mouse over page ${args.name}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (pageMouseover)="onPageMouseover($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

pageOrganizerSaveAs

The pageOrganizerSaveAs event triggers when a Save As action is performed in the page organizer.

Event arguments: PageOrganizerSaveAsEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPageOrganizerSaveAs(args: any): void {
    console.log(`Page organizer save triggered. File name: ${args.downloadDocument}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (pageOrganizerSaveAs)="onPageOrganizerSaveAs($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

pageRenderComplete

The pageRenderComplete event triggers after a page finishes rendering.

Event arguments: PageRenderCompleteEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPageRenderComplete(args: any): void {
    console.log(`Page ${args.data} rendering completed.`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (pageRenderComplete)="onPageRenderComplete($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

pageRenderInitiate

The pageRenderInitiate event triggers when page rendering begins.

Event arguments: PageRenderInitiateEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPageRenderInitiate(args: any): void {
    console.log(`Page ${args.jsonData} rendering initiated.`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (pageRenderInitiate)="onPageRenderInitiate($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

printEnd

The printEnd event triggers when a print action completes.

Event arguments: PrintEndEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPrintEnd(): void {
    console.log('Print action completed.');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (printEnd)="onPrintEnd()"
  style="height: 600px"
>
</ejs-pdfviewer>

printStart

The printStart event triggers when a print action is initiated.

Event arguments: PrintStartEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onPrintStart(): void {
    console.log('Print action initiated.');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (printStart)="onPrintStart()"
  style="height: 600px"
>
</ejs-pdfviewer>

removeSignature

The removeSignature event triggers when a signature is removed.

Event arguments: RemoveSignatureEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onRemoveSignature(args: any): void {
    console.log(`Signature removed from page ${args.bounds}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (removeSignature)="onRemoveSignature($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

resizeSignature

The resizeSignature event triggers when a signature is resized.

Event arguments: ResizeSignatureEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onResizeSignature(args: any): void {
    console.log(`Signature resized on page ${args.currentPosition}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (resizeSignature)="onResizeSignature($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

resourcesLoaded

The resourcesLoaded event triggers after the viewer’s required resources are loaded.

Event arguments: void.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onResourcesLoaded(): void {
    console.log('PDFium resources loaded.');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (resourcesLoaded)="onResourcesLoaded()"
  style="height: 600px"
>
</ejs-pdfviewer>

signaturePropertiesChange

The signaturePropertiesChange event triggers when signature properties change.

Event arguments: SignaturePropertiesChangeEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onSignaturePropertiesChange(args: any): void {
    console.log(`Signature properties changed on page ${args.type}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (signaturePropertiesChange)="onSignaturePropertiesChange($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

signatureSelect

The signatureSelect event triggers when a signature is selected.

Event arguments: SignatureSelectEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onSignatureSelect(args: any): void {
    console.log(`Signature selected on page ${args.signature}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (signatureSelect)="onSignatureSelect($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

signatureUnselect

The signatureUnselect event triggers when a signature is unselected.

Event arguments: SignatureUnselectEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onSignatureUnselect(args: any): void {
    console.log(`Signature unselected ${args.signature}`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (signatureUnselect)="onSignatureUnselect($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

textSearchComplete

The textSearchComplete event triggers when a text search completes.

Event arguments: TextSearchCompleteEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onTextSearchComplete(): void {
    console.log('Text search completed.');
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (textSearchComplete)="onTextSearchComplete()"
  style="height: 600px"
>
</ejs-pdfviewer>

textSearchHighlight

The textSearchHighlight event triggers when searched text is highlighted.

Event arguments: TextSearchHighlightEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onTextSearchHighlight(args: any): void {
    console.log(`Search result ${args.bounds} highlighted.`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (textSearchHighlight)="onTextSearchHighlight($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

textSearchStart

The textSearchStart event triggers when a text search is initiated.

Event arguments: TextSearchStartEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onTextSearchStart(args: any): void {
    console.log(`Text search started for: "${args.searchText}"`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (textSearchStart)="onTextSearchStart($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

textSelectionEnd

The textSelectionEnd event triggers when text selection is complete.

Event arguments: TextSelectionEndEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onTextSelectionEnd(args: any): void {
    console.log(`Text selection ended on page ${args.pageIndex}.`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (textSelectionEnd)="onTextSelectionEnd($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

textSelectionStart

The textSelectionStart event triggers when text selection is initiated.

Event arguments: TextSelectionStartEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onTextSelectionStart(args: any): void {
    console.log(`Text selection started on page ${args.pageIndex}.`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (textSelectionStart)="onTextSelectionStart($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

thumbnailClick

The thumbnailClick event triggers when a thumbnail is clicked.

Event arguments: ThumbnailClickEventArgs.

Example:

// app.ts
import { Component } from '@angular/core';
import {
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ]
})
export class AppComponent {
  public documentPath = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';

  public onThumbnailClick(args: any): void {
    console.log(`Thumbnail clicked for page index ${args.pageNumber}.`);
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  [resourceUrl]="resourceUrl"
  (thumbnailClick)="onThumbnailClick($event)"
  style="height: 600px"
>
</ejs-pdfviewer>

Tip: For annotation and signature-specific events and arguments, see the dedicated Annotations Events topic.