diff --git a/Document-Processing/PDF/PDF-Viewer/angular/accessibility.md b/Document-Processing/PDF/PDF-Viewer/angular/accessibility.md
index 685ded52b..8322defa9 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/accessibility.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/accessibility.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Accessibility in Syncfusion® Angular PDF Viewer components
+# Accessible PDF Viewing with Syncfusion Angular Components
The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
@@ -132,7 +132,7 @@ import { LinkAnnotationService, BookmarkViewService, MagnificationService,
})
export class AppComponent implements OnInit {
public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public resourceUrl = 'https://cdn.syncfusion.com/ej2/24.1.41/dist/ej2-pdfviewer-lib';
+ public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
ngOnInit(): void {
}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md
new file mode 100644
index 000000000..26f0352cb
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-event.md
@@ -0,0 +1,1546 @@
+---
+layout: post
+title: Annotations Events | Syncfusion
+description: Learn here all about annotation events in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# PDF Viewer Annotations events in Angular
+
+The PDF Viewer control provides support for several annotation events. The annotation events supported by the PDF Viewer control are:
+
+| Annotation events | Description |
+|---------------------------------|--------------------------------------------------------------------|
+| [annotationAdd](#annotationadd) | Event triggers when an annotation is added. |
+| [annotationDoubleClick](#annotationdoubleclick) | Event triggers when an annotation is double-clicked. |
+| [annotationMouseLeave](#annotationmouseleave) | Event triggers when the mouse cursor leaves an annotation. |
+| [annotationMouseover](#annotationmouseover) | Event triggers when the mouse cursor moves over an annotation. |
+| [annotationMove](#annotationmove) | Event triggers when an annotation is moved. |
+| [annotationMoving](#annotationmoving) | Event triggers while an annotation is being moved. |
+| [annotationPropertiesChange](#annotationpropertieschange) | Event triggers when an annotation’s properties are changed. |
+| [annotationRemove](#annotationremove) | Event triggers when an annotation is removed. |
+| [annotationResize](#annotationresize) | Event triggers when an annotation is resized. |
+| [annotationSelect](#annotationselect) | Event triggers when an annotation is selected. |
+| [annotationUnselect](#annotationunselect) | Event triggers when an annotation is unselected. |
+| [beforeAddFreeText](#beforeaddfreetext) | Event triggers before adding free text. |
+| [addSignature](#addsignature) | Event triggers when a signature is added. |
+| [removeSignature](#removesignature) | Event triggers when a signature is removed. |
+| [resizeSignature](#resizesignature) | Event triggers when a signature is resized. |
+| [signaturePropertiesChange](#signaturepropertieschange) | Event triggers when signature properties change. |
+| [signatureSelect](#signatureselect) | Event triggers when a signature is selected. |
+| [signatureUnselect](#signatureunselect) | Event triggers when a signature is unselected. |
+
+### annotationAdd
+
+The [annotationAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#annotationadd) event is triggered when an annotation is added to the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [AnnotationAddEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotationaddeventargs/). It provides properties such as `annotationId`, `pageNumber`, `annotationType`, and `bounds`.
+
+The following example illustrates how to handle the `annotationAdd` event.
+
+```html
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onAnnotationUnselect(args: any): void {
+ console.log('Annotation unselected with ID:', args.annotationId);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### beforeAddFreeText
+
+The [beforeAddFreeText](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#beforeaddfreetext) event is triggered before adding free text to the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [BeforeAddFreeTextEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/beforeAddFreeTextEventArgs/).
+
+The following example illustrates how to handle the `beforeAddFreeText` event.
+
+```html
+
+
+
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onBeforeAddFreeText(args: any): void {
+ console.log('Before adding free text on page:', args.pageIndex);
+
+ // Optional: Cancel the addition of the free text annotation
+ // args.cancel = true;
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Signature-related events
+
+### addSignature
+
+The [addSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#addsignature) event is triggered when a signature is added to the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [AddSignatureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/addSignatureEventArgs/). It provides properties such as `pageNumber`.
+
+The following example illustrates how to handle the `addSignature` event.
+
+```html
+
+
+
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onAddSignature(args: any): void {
+ console.log('Signature added to page:', args.pageIndex);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### removeSignature
+
+The [removeSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#removesignature) event is triggered when a signature is removed from the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [RemoveSignatureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/removeSignatureEventArgs/). It provides properties such as `pageNumber`.
+
+The following example illustrates how to handle the `removeSignature` event.
+
+```html
+
+
+
+
+```
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onRemoveSignature(args: any): void {
+ console.log('Signature removed from page:', args.pageIndex);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### resizeSignature
+
+The [resizeSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#resizesignature) event is triggered when a signature is resized in the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [ResizeSignatureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+
+The following example illustrates how to handle the `resizeSignature` event.
+
+```html
+
+
+
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onResizeSignature(args: any): void {
+ console.log('Signature resized on page:', args.pageIndex);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### signaturePropertiesChange
+
+The [signaturePropertiesChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#signaturepropertieschange) event is triggered when signature properties are changed in the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+
+The following example illustrates how to handle the `signaturePropertiesChange` event.
+
+```html
+
+
+
+
+```
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onSignaturePropertiesChange(args: any): void {
+ console.log('Signature properties changed on page:', args.pageIndex);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### signatureSelect
+
+The [signatureSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#signatureselect) event is triggered when a signature is selected in the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [SignatureSelectEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/signatureSelectEventArgs/).
+
+The following example illustrates how to handle the `signatureSelect` event.
+
+```html
+
+
+
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onSignatureSelect(args: any): void {
+ console.log('Signature selected on page:', args.pageIndex);
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### signatureUnselect
+
+The [signatureUnselect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#signatureunselect) event is triggered when a signature is unselected in the PDF Viewer.
+
+#### Event Arguments
+
+For event data, see [SignatureUnSelectEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/signatureUnSelectEventArgs/).
+
+The following example illustrates how to handle the `signatureUnselect` event.
+
+```html
+
+
+
+
+```
+
+{% tabs %}
+{% highlight ts tabtitle="app.component.ts" %}
+import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ encapsulation: ViewEncapsulation.None,
+ styleUrls: ['./app.component.css'],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+ ],
+ standalone: true,
+ imports: [PdfViewerModule]
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfViewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic if needed
+ }
+
+ onSignatureUnselect(args: any): void {
+ console.log('Signature unselected on page:', args.pageIndex);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotations-in-mobile-view.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotations-in-mobile-view.md
new file mode 100644
index 000000000..8a63a622f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotations-in-mobile-view.md
@@ -0,0 +1,122 @@
+---
+layout: post
+title: Annotations mobileView in Angular PDF Viewer control | Syncfusion
+description: Learn how to use annotations in mobile view with the Syncfusion Angular PDF Viewer (Essential JS 2).
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+# Annotations in mobile view in Angular PDF Viewer control
+
+## Open the annotation toolbar
+
+**Step 1:** Click Edit Annotation on the toolbar to enable the annotation toolbar.
+
+
+
+**Step 2:** The annotation toolbar appears below the main toolbar.
+
+
+
+## Add sticky note annotations
+
+**Step 1:** Click the Sticky Notes icon, then tap the page where the note should be placed.
+
+
+
+**Step 2:** Tap the page to add the sticky note annotation.
+
+
+
+## Add text markup annotations
+
+**Step 1:** Tap a text markup icon, select the text to mark, then tap the selection to apply the markup.
+
+
+
+**Step 2:** The text markup annotation is applied to the selected text.
+
+
+
+## Add shape and measurement annotations
+
+**Step 1:** Tap the Shape or Measure icon to open the corresponding toolbar.
+
+
+
+**Step 2:** Choose a shape or measurement type, then draw it on the page.
+
+
+
+**Step 3:** The annotation appears on the PDF page.
+
+
+
+## Add stamp annotations
+
+**Step 1:** Tap the Stamp icon and select a stamp type from the menu.
+
+
+
+**Step 2:** Tap the page to place the stamp annotation.
+
+
+
+## Add signature annotations
+
+**Step 1:** Tap the Signature icon to open the canvas. Draw the signature, tap Create, then tap the viewer to place it.
+
+
+
+**Step 2:** The signature is added to the page.
+
+
+
+## Add ink annotations
+
+**Step 1:** Tap the Ink tool and draw on the page.
+
+
+
+**Step 2:** The ink annotation appears on the page.
+
+
+
+## Change annotation properties (before adding)
+
+**Step 1:** Change properties before placing the annotation.
+
+**Step 2:** Tap the annotation icon to open the property toolbar, adjust properties, then place the annotation on the page.
+
+
+
+## Change annotation properties (after adding)
+
+**Step 1:** Change annotation properties after adding the annotation.
+
+**Step 2:** Select the annotation to show the property toolbar, then adjust the properties.
+
+
+
+## Delete annotations
+
+**Step 1:** Select the annotation to show the property toolbar, then tap the Delete icon to remove it.
+
+
+
+## Open the comment panel
+
+**Step 1:** Open the comment panel using the icon in the property toolbar or the annotation toolbar.
+
+
+
+**Step 2:** The comment panel appears.
+
+
+
+## Close the comment panel
+
+**Step 1:** Tap the Close button to close the comment panel.
+
+
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md
index 74d1afd0b..97bfc7808 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md
@@ -1,16 +1,16 @@
---
layout: post
-title: Comments in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Comments in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Comments in Angular PDF Viewer component | Syncfusion
+description: Learn about comments, replies, and status in the Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2.
platform: document-processing
control: Comments
documentation: ug
domainurl: ##DomainURL##
---
-# Comments
+# Comments in Angular PDF Viewer control
-The PDF Viewer control provides options to add, edit, and delete the comments to the following annotation in the PDF documents:
+The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
* Shape annotation
* Stamp annotation
@@ -20,11 +20,11 @@ The PDF Viewer control provides options to add, edit, and delete the comments to
* Free text annotation
* Ink annotation
-
+
## Adding a comment to the annotation
-Annotation comment, comment replies, and status can be added to the PDF document using the comment panel.
+Annotation comments, replies, and status can be managed in the PDF document using the comment panel.
### Comment panel
@@ -33,87 +33,87 @@ Annotation comments can be added to the PDF using the comment panel. The comment
1. Using the annotation menu
* Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. A comment panel will appear.
+ * Click the Comment Panel button. The comment panel opens.
2. Using Context menu
- * Select annotation in the PDF document and right-click it.
- * Select the comment option in the context menu that appears.
+ * Select the annotation in the PDF document and right-click it.
+ * Select Comment from the context menu..
3. Using the Mouse click
- * Select annotation in the PDF document and double click it, a comment panel will appear.
+ * Select the annotation in the PDF document and double-click it. The comment panel opens.
-If the comment panel is already in the open state, you can select the annotations and add annotation comments using the comment panel.
+If the comment panel is already open, select the annotation and add comments using the panel.
### Adding comments
-* Select annotation in the PDF document and click it.
-* The selected annotation comment container is highlighted in the comment panel.
-* Now, you can add comment and comment replies using the comment panel.
+* Select the annotation in the PDF document.
+* The corresponding comment thread is highlighted in the comment panel.
+* Add comments and replies using the comment panel.
-
+
### Adding Comment Replies
-* The PDF Viewer control provides an option to add multiple replies to the comment.
-* After adding the annotation comment, you can add a reply to the comment.
+* Multiple replies can be added to a comment.
+* After adding a comment, add replies as needed.
### Adding Comment or Reply Status
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Set Status from the context menu.
+* Choose a status for the comment.
-
+
### Editing the comments and comments replies of the annotations
-The comment, comment replies, and status of the annotation can be edited using the comment panel.
+Comments, replies, and status can be edited using the comment panel.
### Editing the Comment or Comment Replies
-The annotation comment and comment replies can be edited in the following ways:
+Edit comments and replies in the following ways:
1. Using the Context menu
- * Select the Annotation Comments in the comment panel.
- * Click the More options button showing in the Comments or reply container.
- * Select the Edit option in the context menu that appears.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
+ * Select the annotation comment in the comment panel.
+ * Click More options in the comment or reply container.
+ * Select Edit from the context menu.
+ * An editable text box appears. Change the content of the comment or reply.
2. Using the Mouse Click
- * Select the annotation comments in the comment panel.
- * Double click the comment or comment reply content.
- * Now, an editable text box appears. You can change the content of the annotation comment or comment reply.
+ * Select the annotation comment in the comment panel.
+ * Double-click the comment or reply content.
+ * An editable text box appears. Change the content of the comment or reply.
### Editing Comment or Reply Status
-* Select the Annotation Comments in the comment panel.
-* Click the more options button showing in the Comments or reply container.
-* Select the Set Status option in the context menu that appears.
-* Select the status of the annotation comment in the context menu that appears.
-* Status ‘None’ is the default state. If the status is set to ‘None,’ the comments or reply does not appear.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Set Status from the context menu.
+* Choose a status for the comment.
+* None is the default state. Selecting None clears the status indicator; the comment or reply remains visible.
-
+
### Delete Comment or Comment Replies
-* Select the Annotation Comments in the comment panel.
-* Click the more options button shown in the Comments or reply container.
-* Select the Delete option in the context menu that appears.
+* Select the annotation comment in the comment panel.
+* Click More options in the comment or reply container.
+* Select Delete from the context menu.
-
+
->The annotation will be deleted on deleting the comment using comment panel.
+>Deleting the root comment from the comment panel also deletes the associated annotation.
## How to check the comments added by the user
-The comments added to the PDF document can be viewed by using the `comments` property of the annotation.
+Comments added to the PDF document can be read using the annotation's `comments` property.
-Refer to the following code to check the comments added in the PDF document using a button click event.
+The following example logs comments in response to a button click.
{% tabs %}
{% highlight html tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md
index a3dc6dfff..28d00cd1a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/free-text-annotation.md
@@ -1,30 +1,30 @@
---
layout: post
-title: Free text annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Free text annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Free text annotation in Angular PDF Viewer component | Syncfusion
+description: Learn about free text annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
platform: document-processing
control: Free text annotation
documentation: ug
domainurl: ##DomainURL##
---
-# Free text annotation
+# Free text annotation in Angular PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the free text annotations.
+The PDF Viewer control provides options to add, edit, and delete free text annotations.
-## Adding a free text annotation to the PDF document
+## Add a free text annotation to the PDF document
-The Free text annotations can be added to the PDF document using the annotation toolbar.
+Free text annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Free Text Annotation** button in the annotation toolbar. It enables the Free Text annotation mode.
-* You can add the text over the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Select the **Free Text Annotation** button to enable free text annotation mode.
+* Add text anywhere on the pages of the PDF document.
-In the pan mode, if the free text annotation mode is entered, the PDF Viewer control will switch to text select mode.
+When in pan mode, selecting free text annotation switches the PDF Viewer to text select mode.
-
+
-Refer to the following code sample to switch to the Free Text annotation mode using a button click.
+The following example switches to free text annotation mode using a button click.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -147,11 +147,11 @@ RemoveSelection() {
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Annotations/How%20to%20clear%20the%20selection%20from%20annotation)
-## Adding a Free Text annotation to the PDF document Programmatically
+## Add a free text annotation programmatically to the PDF document
-With the PDF Viewer library, you can add a Free Text annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+The PDF Viewer library allows adding a free text annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method
-Here's a example of how you can utilize the **addAnnotation()** method to include a Free Text annotation programmatically
+Here is an example of adding a free text annotation programmatically using addAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -262,63 +262,63 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of free text annotation
+## Edit the properties of free text annotations
-The font family, font size, font styles, font color, text alignment, fill color, the border stroke color, border thickness, and opacity of the free text annotation can be edited using the Font Family tool, Font Size tool, Font Color tool, Text Align tool, Font Style tool Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
+Font family, font size, styles, font color, text alignment, fill color, stroke color, border thickness, and opacity can be edited using the Font Family, Font Size, Font Color, Text Align, Font Style, Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing font family
+### Edit font family
-The font family of the annotation can be edited by selecting the desired font in the Font Family tool.
+Edit the font family by selecting a font in the Font Family tool.
-
+
-### Editing font size
+### Edit font size
-The font size of the annotation can be edited by selecting the desired size in the Font Size tool.
+Edit the font size by selecting a size in the Font Size tool.
-
+
-### Editing font color
+### Edit font color
-The font color of the annotation can be edited using the color palette provided in the Font Color tool.
+Edit the font color using the color palette in the Font Color tool.
-
+
-### Editing the text alignment
+### Edit the text alignment
-The text in the annotation can be aligned by selecting the desired styles in the drop-down pop-up in the Text Align tool.
+Align text by selecting an option from the Text Align tool..
-
+
-### Editing text styles
+### Edit text styles
-The style of the text in the annotation can be edited by selecting the desired styles in the drop-down pop-up in the Font Style tool.
+Edit text styles by selecting options in the Font Style tool.
-
+
-### Editing fill color
+### Edit fill color
-The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
+Edit the fill color using the color palette in the Edit Color tool.
-
+
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The border thickness of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit border thickness using the range slider in the Edit Thickness tool.
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit border thickness using the range slider in the Edit Thickness tool.
-
+
## Move the free text annotation programmatically
@@ -367,11 +367,11 @@ public annotationAddEventHandler(args) {
Find the sample [how to get the newly added free text annotation id](https://stackblitz.com/edit/angular-dxub1a-utuefq?file=app.component.ts)
-## Change the content of an existing Free text annotation programmatically
+## Change the content of an existing free text annotation programmatically
-To change the content of an existing free text annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To change the content of an existing free text annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
+Here is an example of changing the content of a free text annotation using editAnnotation():
```html
@@ -391,14 +391,13 @@ changeContent() {
```
-Find the sample [how to change the content of an existing free text annotation programmatically](https://stackblitz.com/edit/angular-dxub1a-krsywy?file=app.component.ts)
+N> The current version of the PDF Viewer does not edit existing document text. New free text annotations can be added and modified within the document.
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the free text annotation can be set before creating the control using the FreeTextSettings.
+Default properties for free text annotations can be set before creating the control using FreeTextSettings.
-After editing the default values, they will be changed to the selected values.
-Refer to the following code sample to set the default free text annotation settings.
+After changing default values, the selected values are applied. The following example sets default free text annotation settings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md
index 110f55793..d898baf19 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/import-export-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Import export annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Import export annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Import export annotation in Angular PDF Viewer component | Syncfusion
+description: Learn here all about Import export annotation in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Import export annotation
documentation: ug
@@ -542,7 +542,7 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
{% endhighlight %}
{% endtabs %}
->Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_3.0) and then the angular code. Also note that, the JSON file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
+>Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_8.0) and then the angular code. Also note that, the JSON file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
Refer to the following code snippet to import annotations from an XFDF file.
@@ -623,7 +623,7 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
{% endhighlight %}
{% endtabs %}
->Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_3.0) and then the angular code. Also note that, the XFDF file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
+>Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_8.0) and then the angular code. Also note that, the XFDF file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
## Importing Annotation Using Base64 Data
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md
index 3cd38c54b..b571cf752 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/ink-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Ink annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Ink annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Ink annotation in Angular PDF Viewer component | Syncfusion
+description: Learn about ink annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
platform: document-processing
control: Ink annotation
documentation: ug
@@ -10,21 +10,21 @@ domainurl: ##DomainURL##
# Ink Annotation in Angular PDF Viewer component
-The PDF Viewer control provides the options to add, edit, and delete the ink annotations.
+The PDF Viewer control provides options to add, edit, and delete ink annotations.
-
+
-## Adding an ink annotation to the PDF document
+## Add an ink annotation to the PDF document
-The ink annotations can be added to the PDF document using the annotation toolbar.
+Ink annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Draw Ink** button in the annotation toolbar. It enables the ink annotation mode.
-* You can draw anything over the pages of the PDF document.
+* Click the **Edit Annotation** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Select the **Draw Ink** button to enable ink annotation mode.
+* Draw on any page of the PDF document.
-
+
-Refer to the following code sample to switch to the ink annotation mode.
+Ink tool in the annotation toolbar
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -103,11 +103,11 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
{% endhighlight %}
{% endtabs %}
-## Adding a Ink annotation to the PDF document Programmatically
+## Add an ink annotation programmatically to the PDF document
-With the PDF Viewer library, you can add a Ink annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+The PDF Viewer library allows adding an ink annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a Ink annotation programmatically
+Here is an example of adding an ink annotation programmatically using addAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -197,11 +197,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Edit the existing Ink annotation programmatically
+## Edit an existing ink annotation programmatically
-To modify existing Ink annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing ink annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -305,34 +305,33 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of the ink annotation
+## EEdit the properties of ink annotations
-The stroke color, thickness, and opacity of the ink annotation can be edited using the Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
+Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing stroke color
+### Edit stroke color
-The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
-
+
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
+Edit thickness using the range slider in the Edit Thickness tool.
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
-
+
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the ink annotation can be set before creating the control using the InkAnnotationSettings.
+Default properties for ink annotations can be set before creating the control using InkAnnotationSettings.
-After editing the default values, they will be changed to the selected values.
-Refer to the following code sample to set the default ink annotation settings.
+After changing default values, the selected values are applied.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md
index cf8d2f71b..f3fbc5986 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/line-angle-constraints.md
@@ -1,18 +1,19 @@
---
layout: post
-title: Line Angle Constraints in Angular PDF Viewer | Syncfusion
+title: Line angle constraints in Angular PDF Viewer | Syncfusion
+description: Programmatically manage text markup annotations like highlight, underline, strikethrough, and squiggly in your PDF documents.
description: Learn all about Line Angle Constraints Annotation in the Syncfusion Angular PDF Viewer component of Essential JS 2 and more.
platform: document-processing
control: Line Angle Constraints
documentation: ug
---
-# Line Angle Constraints in Angular PDF Viewer
+# Line angle constraints in Angular PDF Viewer
The PDF Viewer control provides robust **line angle constraints** functionality. This allows users to draw line type annotations with controlled angle snapping, improving accuracy and consistency across technical drawings and measurements across your PDF documents.
-## Enabling Line Angle Constraints
-To enable line angle constraints, configure the `enableLineAngleConstraints` property within the `annotationDrawingOptions` of the PDF Viewer. When enabled, line-type annotations are automatically restricted to fixed angles.
+## Enable line angle constraints
+onfigure the `enableLineAngleConstraints` property within `annotationDrawingOptions`. When enabled, supported line-type annotations snap to fixed angles.
The following code demonstrates how to enable line angle constraints:
@@ -97,48 +98,49 @@ The `enableLineAngleConstraints` property activates angle snapping for line-base
- Automatic angle snapping during the drawing
- Enhanced precision for technical drawings and measurements
-- Desktop support: Hold **Shift** while drawing to activate constraints
+- Desktop support: Desktop behavior: hold Shift while drawing to toggle constraints (when disabled, Shift temporarily enables; when enabled, Shift enforces snapping)
- Real-time visual feedback showing angle snapping behavior
### restrictLineAngleTo
-The `restrictLineAngleTo` property defines the angle increment (in degrees) that constrains line-based annotations. The default value is **45 degrees**.
+Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.
-**Angle Snapping Rules:**
+Angle snapping rules:
- The initial drawing direction is treated as the 0° reference point
- Snapped angles are calculated based on the increment
- If the increment doesn’t divide 360 evenly, angles reset after 360°
-**Examples:**
+Examples:
- restrictLineAngleTo: 45 → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
- restrictLineAngleTo: 100 → Snapped angles: 0°, 100°, 200°, 300°, 360°
-## Working with Constrained Annotations
+## Work with constrained annotations
### Drawing Behavior
When line angle constraints are enabled:
-**Initial Drawing:** Start drawing a line, arrow, polygon, distance, perimeter, area, or volume as usual.
-**Angle Snapping:** The line snaps to the nearest allowed angle.
-**Visual Feedback:** Snapped angle is shown in real time.
-**Completion:** Release to complete the annotation.
+- Start drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
+- The segment snaps to the nearest allowed angle.
+- A visual indicator reflects snapping in real time.
+- Release to complete the annotation.
### Keyboard Shortcuts
-**Desktop Platforms:**
-
-**Shift + Drag:** Enables angle snapping even when `enableLineAngleConstraints` is false.
+Desktop platforms:
+- Shift + drag: toggles snapping. If constraints are disabled, Shift temporarily enables them; if enabled, Shift enforces snapping.
### Selector-Based Modifications
When modifying existing line annotations using selectors:
- Constraints apply based on the original line direction.
-- The reference angle (0°) is determined by the lines current orientation.
-- Only lines and arrows support constraint snapping during modification.
-- Adjustments snap to the configured angle increment relative to the original direction.
+- The reference angle (0°) is determined by the line’s current orientation.
+- Constraint snapping during modification is supported for Line and Arrow.
+- Adjustments snap to the configured angle increment.
+
+[View a sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
-N> You can refer to our [Angular PDF Viewer](https://www.syncfusion.com/angular-ui-components/angular-pdf-viewer) feature tour page for its groundbreaking feature representations. You can also explore our [Angular PDF Viewer example](https://github.com/syncfusion/ej2-angular-samples/tree/master/src/app/pdfviewer) to know how to render and configure the PDF Viewer.
+N> Refer to the Angular PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) for feature highlights. Explore the [Angular PDF Viewer examples](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples) to learn how to render and configure the PDF Viewer.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md
index 22de57732..03fd47d83 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/measurement-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Measurement annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Measurement annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Measurement annotation in Angular PDF Viewer control | Syncfusion
+description: Learn about measurement annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): distance, perimeter, area, radius, and volume.
platform: document-processing
control: Measurement annotation
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Measurement Annotation in Angular PDF Viewer component
-The PDF Viewer provides the options to add measurement annotations. You can measure the page annotations with the help of measurement annotation. The supported measurement annotations in the PDF Viewer control are:
+The PDF Viewer provides options to add measurement annotations. The supported measurement annotations are:
* Distance
* Perimeter
@@ -18,22 +18,22 @@ The PDF Viewer provides the options to add measurement annotations. You can meas
* Radius
* Volume
-
+
## Adding measurement annotations to the PDF document
The measurement annotations can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Measurement Annotation** dropdown button. A dropdown pop-up will appear and shows the measurement annotations to be added.
-* Select the measurement type to be added to the page in the dropdown pop-up. It enables the selected measurement annotation mode.
-* You can measure and add the annotation over the pages of the PDF document.
+* Click the **Measurement Annotation** drop-down button. The pop-up lists available measurement annotation types.
+* Select a measurement type to enable its annotation mode.
+* Measure and add annotations on the pages of the PDF document.
-In the pan mode, if the measurement annotation mode is entered, the PDF Viewer control will switch to text select mode.
+When in pan mode, selecting a measurement annotation switches the PDF Viewer to text select mode.
-Refer to the following code snippet to switch to distance annotation mode.
+The following example switches to distance annotation mode.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -112,11 +112,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Adding a measurement annotation to the PDF document Programmatically
+## Add a measurement annotation to the PDF document Programmatically
-With the PDF Viewer library, you can add a measurement annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+The PDF Viewer library allows adding measurement annotations programmatically using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a measurement annotation programmatically:
+Here is an example showing how to add measurement annotations programmatically using addAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -289,11 +289,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Edit the existing measurement annotation programmatically
+## Edit an existing measurement annotation programmatically
-To modify existing measurement annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing measurement annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -503,29 +503,29 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of measurement annotation
+## Edit the properties of measurement annotations
-The fill color, stroke color, thickness, and opacity of the measurement annotation can be edited using the Edit Color tool, Edit Stroke Color tool, Edit Thickness tool, and Edit Opacity tool in the annotation toolbar.
+The fill color, stroke color, thickness, and opacity can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
-### Editing fill color
+### Edit fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-### Editing stroke color
+### Edit stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-### Editing thickness
+### Edit thickness
-The thickness of the border of the annotation can be edited using the range slider provided in the Edit thickness tool.
+Edit border thickness using the range slider provided in the Edit Thickness tool.
-### Editing opacity
+### Edit opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
@@ -533,14 +533,13 @@ The opacity of the annotation can be edited using the range slider provided in t
### Editing the line properties
-The properties of the line measurements such as distance and perimeter annotations can be edited using the Line properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the distance and perimeter annotations.
+Line-based measurement annotations (distance and perimeter) have additional options in the Line Properties window. Open it by right-clicking the annotation and selecting Properties from the context menu.
-## Setting default properties during control initialization
+## Set default properties during control initialization
-The properties of the measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings and volumeSettings.
-Refer to the following code snippet to set the default annotation settings.
+Default properties for measurement annotations can be set before creating the control using distanceSettings, perimeterSettings, areaSettings, radiusSettings, and volumeSettings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md
index 9d9134269..b3b949c12 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/shape-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Shape annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Shape annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Shape annotation in Angular PDF Viewer control | Syncfusion
+description: Learn about shape annotations in the Syncfusion Angular PDF Viewer (Essential JS 2), including add, edit, delete, and default settings.
platform: document-processing
control: Shape annotation
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Shape Annotation in Angular PDF Viewer component
-The PDF Viewer control provides the options to add, edit, and delete the shape annotations. The shape annotation types supported in the PDF Viewer control are:
+The PDF Viewer control provides options to add, edit, and delete shape annotations. The supported shape annotation types are:
* Line
* Arrow
@@ -18,20 +18,22 @@ The PDF Viewer control provides the options to add, edit, and delete the shape a
* Circle
* Polygon
-
+
## Adding a shape annotation to the PDF document
Shape annotations can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Shape Annotation** drop-down button. A drop-down pop-up will appear and shows the shape annotations to be added.
-* Select the shape types to be added to the page in the drop-down pop-up. It enables the selected shape annotation mode.
-* You can add the shapes over the pages of the PDF document.
+* Click the **Shape Annotation** drop-down button. The pop-up lists available shape annotation types.
+* Select a shape type to enable its annotation mode.
+* Draw the shape on the pages of the PDF document.
+
+N> When in pan mode and a shape annotation tool is selected, the PDF Viewer switches to text select mode automatically to ensure a smooth interaction experience.
In the pan mode, if the shape annotation mode is entered, the PDF Viewer control will switch to text select mode.
-
+
Refer to the following code sample to switch to the circle annotation mode.
@@ -114,11 +116,11 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
{% endhighlight %}
{% endtabs %}
-## Adding a shape annotation to the PDF document Programmatically
+## Add a shape annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a shape annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+The PDF Viewer library allows adding a shape annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a shape annotation programmatically:
+Here is an example showing how to add shape annotations programmatically using addAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -286,11 +288,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Edit the existing shape annotation programmatically
+## Edit an existing shape annotation programmatically
-To modify existing shape annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing shape annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation()::
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -488,43 +490,43 @@ export class AppComponent implements OnInit {
## Editing the properties of the shape annotation
-The fill color, stroke color, thickness, and opacity of the shape annotation can be edited using the Edit color tool, Edit stroke color tool, Edit thickness tool, and Edit opacity tool in the annotation toolbar.
+The fill color, stroke color, thickness, and opacity of shape annotations can be edited using the Edit Color, Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
### Editing fill color
The fill color of the annotation can be edited using the color palette provided in the Edit Color tool.
-
+
### Editing stroke color
The stroke color of the annotation can be edited using the color palette provided in the Edit Stroke Color tool.
-
+
### Editing thickness
The thickness of the border of the annotation can be edited using the range slider provided in the Edit Thickness tool.
-
+
### Editing opacity
The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
-
+
### Editing the line properties
-The properties of the line shapes such as line and arrow annotations can be edited using the Line Properties window. It can be opened by selecting the Properties option in the context menu that appears on right-clicking the line and arrow annotations.
+Line and arrow annotations have additional options in the Line Properties window. Open it by right-clicking a line or arrow annotation and selecting Properties from the context menu.
Refer to the following code sample to set the default annotation settings.
-
+
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
+Default properties for shape annotations can be set before creating the control using LineSettings, ArrowSettings, RectangleSettings, CircleSettings, and PolygonSettings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/signature-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/signature-annotation.md
index 61d3f3f1a..8ead29596 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/signature-annotation.md
@@ -1,33 +1,33 @@
---
layout: post
-title: Handwritten signature in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Handwritten signature in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Handwritten signature in Angular PDF Viewer control | Syncfusion
+description: Learn about handwritten signatures in the Syncfusion Angular PDF Viewer (Essential JS 2): add, enable/disable, and edit properties.
platform: document-processing
control: Handwritten signature
documentation: ug
domainurl: ##DomainURL##
---
-# Handwritten Signature
+# Handwritten signature in Angular PDF Viewer control
-The PDF Viewer control supports adding the handwritten signatures to a PDF document. The handwritten signature reduces the paperwork of reviewing the content and verifies it digitally.
+The PDF Viewer control supports adding handwritten signatures to a PDF document. Handwritten signatures reduce paperwork and enable digital verification.
## Adding a handwritten signature to the PDF document
The handwritten signature can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Select the **Handwritten Signature** button in the annotation toolbar. The signature panel will appear.
+* Select the **HandWritten Signature** button in the annotation toolbar. The signature panel appears.
-
+
-* Draw the signature in the signature panel.
+* Draw the signature in the panel.
-
+
-* Then, click the **Create** button and move the signature using the mouse and place them in the desired location.
+* Click **Create**, move the signature, and place it at the desired location.
-
+
## Adding a handwritten signature to the PDF document Programmatically
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md
index 0ff5318bf..2fa355912 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/stamp-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Stamp annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Stamp annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Stamp annotation in Angular PDF Viewer control | Syncfusion
+description: Learn about stamp annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): dynamic, sign here, standard business, and custom stamps.
platform: document-processing
control: Stamp annotation
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Stamp Annotation in Angular PDF Viewer component
-The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotation in the PDF documents:
+The PDF Viewer control provides options to add, edit, delete, and rotate the following stamp annotations in PDF documents:
* Dynamic
* Sign Here
@@ -19,24 +19,24 @@ The PDF Viewer control provides options to add, edit, delete, and rotate the fol
-## Adding stamp annotations to the PDF document
+## Add stamp annotations to the PDF document
The stamp annotations can be added to the PDF document using the annotation toolbar.
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
+* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
-* Select the annotation type to be added to the page in the pop-up.
+* Select a stamp type to enable its annotation mode.
-* You can add the annotation over the pages of the PDF document.
+* Place the stamp on the pages of the PDF document.
-In the pan mode, if the stamp annotation mode is entered, the PDF Viewer control will switch to text select mode.
+N> When in pan mode and a stamp annotation tool is selected, the PDF Viewer switches to text select mode automatically for a smooth interaction experience.
-Refer to the following code sample to switch to the stamp annotation mode.
+The following examples switch to stamp annotation modes.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -114,11 +114,10 @@ Refer to the following code sample to switch to the stamp annotation mode.
{% endhighlight %}
{% endtabs %}
-## Adding a Stamp annotation to the PDF document Programmatically
+## Add a stamp annotation to the PDF document programmatically
+The PDF Viewer library allows adding a stamp annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-With the PDF Viewer library, you can add a Stamp annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-
-Here's a example of how you can utilize the **addAnnotation()** method to include a Stamp annotation programmatically:
+Here are examples showing how to add stamp annotations programmatically using addAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -381,24 +380,23 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Adding custom stamp to the PDF document
+## Add a custom stamp to the PDF document
* Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the **Stamp Annotation** drop-down button. A drop-down pop-up will appear and shows the stamp annotations to be added.
+* Click the **Stamp Annotation** drop-down button. The pop-up lists available stamp annotation types.
* Click the Custom Stamp button.
-* The file explorer dialog will appear, choose the image and then add the image to the PDF page.
+* In the file explorer dialog, choose an image and add it to the PDF page.
->The JPG and JPEG image format is only supported in the custom stamp annotations.
+>Only JPG and JPEG image formats are supported for custom stamp annotations.
## Setting default properties during control initialization
-The properties of the stamp annotation can be set before creating the control using the StampSettings.
+Default properties for stamp annotations can be set before creating the control using StampSettings.
-After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values.
-Refer to the following code sample to set the default sticky note annotation settings.
+After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default stamp annotation settings.
{% tabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md
index 5e77c7504..04c7c3ca2 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/sticky-notes-annotation.md
@@ -1,43 +1,42 @@
---
layout: post
-title: Sticky notes annotation in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Sticky notes annotation in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Sticky notes in Angular PDF Viewer control | Syncfusion
+description: Learn about sticky note annotations in the Syncfusion Angular PDF Viewer (Essential JS 2): add, edit, delete, and default settings.
platform: document-processing
control: Sticky notes annotation
documentation: ug
domainurl: ##DomainURL##
---
-# Sticky Notes Annotation in the Angular PDF Viewer component
+# Sticky notes in Angular PDF Viewer control
-The PDF Viewer control provides the options to add, edit, and delete the sticky note annotations in the PDF document.
+The PDF Viewer control provides options to add, edit, and delete sticky note annotations in the PDF document.
-## Adding a sticky note annotation to the PDF document
+## Add a sticky note annotation to the PDF document
Sticky note annotations can be added to the PDF document using the annotation toolbar.
-* Click the **Comments** button in the PDF Viewer toolbar. A toolbar appears below it.
-* Click the position where you want to add sticky note annotation in the PDF document.
-* Sticky note annotation will be added in the clicked positions.
+* Click the **Comments** button in the PDF Viewer toolbar. The annotation toolbar appears below it.
+* Click the position where the sticky note annotation should be added.
+* The sticky note annotation is added at the clicked position.
-Annotation comments can be added to the PDF document using the comment panel.
+Annotation comments can be added using the comment panel.
-* Select a Sticky note annotation in the PDF document and right-click it.
-* Select the Comment option in the context menu that appears.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
-* Now, you can add Comments, Reply, and Status using the Comment Panel.
+* Select a sticky note annotation in the PDF document and right-click it.
+* Select Comment from the context menu.
+* Add comments, replies, and status using the comment panel.
-## Adding a sticky note annotation to the PDF document Programmatically
+## Add a sticky note annotation to the PDF document programmatically
-With the PDF Viewer library, you can add a sticky note annotation to the PDF Viewer control programmatically using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+The PDF Viewer library allows adding a sticky note annotation programmatically using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's a example of how you can utilize the **addAnnotation()** method to include a sticky note annotation programmatically:
+Here is an example showing how to add a sticky note annotation programmatically using addAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -124,11 +123,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Edit the existing sticky note annotation programmatically
+## Edit an existing sticky note annotation programmatically
-To modify existing sticky note annotation in the Syncfusion® PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify an existing sticky note annotation programmatically, use the editAnnotation() method.
-Here is an example of how you can use the **editAnnotation()** method:
+Here is an example of using editAnnotation():
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -223,31 +222,31 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Editing the properties of the sticky note annotation
+## Edit the properties of the sticky note annotations
### Editing opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Edit opacity using the range slider in the Edit Opacity tool.
### Editing comments
-The comment, comment reply, and comment status of the annotation can be edited using the Comment Panel.
+Comment text, replies, and status can be edited using the comment panel.
-* Open the comment panel using the Comment Panel button showing in the annotation toolbar.
+* Open the comment panel using the Comment Panel button in the annotation toolbar.
-You can modify or delete the comments or comments replay and it’s status using the menu option provided in the comment panel.
+Modify or delete comments or replies, and change status using the menu options in the comment panel.
-## Setting default properties during the control initialization
+## Set default properties during the control initialization
-The properties of the sticky note annotation can be set before creating the control using the StickyNoteSettings.
+Default properties for sticky note annotations can be set before creating the control using StickyNotesSettings.
-After editing the default opacity using the Edit Opacity tool, they will be changed to the selected values. Refer to the following code sample to set the default sticky note annotation settings.
+After changing default opacity using the Edit Opacity tool, the selected value is applied. The following example sets default sticky note annotation settings.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -323,9 +322,9 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Disabling sticky note annotations
+## Disable sticky note annotations
-The PDF Viewer control provides an option to disable the sticky note annotations feature. The code sample for disabling the feature is as follows.
+The PDF Viewer control provides an option to disable sticky note annotations. The following example disables the feature.
{% tabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md
index fc6faab68..8c0fe4f98 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/text-markup-annotation.md
@@ -1,39 +1,39 @@
---
layout: post
-title: Text Markup Annotation in Angular PDF Viewer component | Syncfusion
-description: Learn here all about Text Markup Annotation in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
+title: Text markup annotation in Angular PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and customize text markup annotations like highlight, underline, and squiggly in Syncfusion Angular PDF Viewer.
platform: document-processing
control: Text Markup Annotation
documentation: ug
domainurl: ##DomainURL##
---
-# Text Markup Annotation in the Angular PDF Viewer component
+# title: Text markup annotation in Angular PDF Viewer | Syncfusion
-The PDF Viewer control provides the options to add, edit, and delete text markup annotations such as highlight, underline, strikethrough and squiggly annotations in the PDF document.
+The PDF Viewer provides options to add, edit, and delete text markup annotations, including Highlight, Underline, Strikethrough, and Squiggly.
-## Highlight a text
+## Highlight text
-There are two ways to highlight a text in the PDF document:
+There are two ways to highlight text:
1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select **Highlight** option in the context menu that appears.
+* Select text in the PDF document and right-click it.
+* Select **Highlight** in the context menu.
2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Highlight** button in the annotation toolbar. It enables the highlight mode.
- * Select the text and the highlight annotation will be added.
- * You can also select the text and apply the highlight annotation using the **Highlight** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Highlight** to enable highlight mode.
+ * Select text to add the highlight annotation.
+ * Alternatively, select text first and then click **Highlight**.
-In the pan mode, if the highlight mode is entered, the PDF Viewer control will switch to text select mode to enable the text selection for highlighting the text.
+When pan mode is active and a text markup mode is entered, the PDF Viewer switches to text selection mode to enable selection.
Refer to the following code sample to switch to the highlight mode.
@@ -203,11 +203,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Highlight a text programmatically
+## Highlight text programmatically
-The PDF Viewer library enables you to programmatically highlight text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+Programmatically add highlights using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's an example of how you can use the **addAnnotation()** method to apply highlighting programmatically:
+Example:
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -292,22 +292,22 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Underline a text
+## Underline text
-There are two ways to underline a text in the PDF document:
+There are two ways to underline text:
1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select the **Underline** option in the context menu that appears.
+ *Select text in the PDF document and right-click it.
+ * Select **Underline** in the context menu.
2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Underline** button in the annotation toolbar. It enables the underline mode.
- * Select the text and the underline annotation will be added.
- * You can also select the text and apply the underline annotation using the **Underline** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Underline** to enable underline mode.
+ * Select text to add the underline annotation.
+ * Alternatively, select text first and then click **Underline**.
@@ -481,11 +481,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Underline a text programmatically
+## Underline text programmatically
-The PDF Viewer library enables you to programmatically Underline text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+Programmatically add underlines using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's an example of how you can use the **addAnnotation()** method to apply Underline programmatically:
+Example:
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -570,22 +570,22 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Strikethrough a text
+## Strikethrough text
-There are two ways to strikethrough a text in the PDF document:
+There are two ways to strikethrough text:
1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select the **Strikethrough** option in the context menu that appears.
+* Select text in the PDF document and right-click it.
+* Select **Strikethrough** in the context menu.
2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Strikethrough** button in the annotation toolbar. It enables the strikethrough mode.
- * Select the text and the strikethrough annotation will be added.
- * You can also select the text and apply the strikethrough annotation using the **Strikethrough** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Strikethrough** to enable strikethrough mode.
+ * Select text to add the strikethrough annotation.
+ * Alternatively, select text first and then click **Strikethrough**.
@@ -759,11 +759,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Strikethrough a text programmatically
+## Strikethrough text programmatically
-The PDF Viewer library enables you to programmatically Strikethrough text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+Programmatically add strikethrough using the [addAnnotation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's an example of how you can use the **addAnnotation()** method to apply Strikethrough programmatically:
+Example:
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -848,22 +848,22 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Squiggly a text
+## Add Squiggly to text
-There are two ways to add squiggly to a text in the PDF document:
+There are two ways to add squiggly to text:
1. Using the context menu
- * Select a text in the PDF document and right-click it.
- * Select the **Squiggly** option in the context menu that appears.
+* Select text in the PDF document and right-click it.
+* Select **Squiggly** in the context menu.
2. Using the annotation toolbar
- * Click the **Edit Annotation** button in the PDF Viewer toolbar. A toolbar appears below it.
- * Select the **Squiggly** button in the annotation toolbar. It enables the squiggly mode.
- * Select the text and the squiggly annotation will be added.
- * You can also select the text and apply the squiggly annotation using the **Squiggly** button.
+ * Click the **Edit Annotation** button in the PDF Viewer toolbar to open the annotation toolbar.
+ * Select **Squiggly** to enable squiggly mode.
+ * Select text to add the squiggly annotation.
+ * Alternatively, select text first and then click **Squiggly**.
@@ -1037,11 +1037,11 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Squiggly a text programmatically
+## Squiggly text programmatically
-The PDF Viewer library enables you to programmatically Squiggly text within the PDF Viewer control using the [**addAnnotation()**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
+Refer to the following code snippet to switch back to normal mode from squiggly mode.(https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation/#addannotationn) method.
-Here's an example of how you can use the **addAnnotation()** method to apply Squiggly programmatically:
+Example:
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -1130,37 +1130,37 @@ export class AppComponent implements OnInit {
The selected annotation can be deleted in the following ways:
-1. Using the Delete key
- * Select the annotation to be deleted.
- * Click the Delete key in the keyboard. The selected annotation will be deleted.
+1. Using the Delete/Backspace key
+ * Select the annotation.
+ * Press Delete (or Backspace). The selected annotation is removed.
2. Using the annotation toolbar
- * Select the annotation to be deleted.
- * Click the **Delete Annotation** button in the annotation toolbar. The selected annotation will be deleted.
+ * Select the annotation.
+ * Click **Delete Annotation** in the annotation toolbar. The selected annotation is removed.
-## Editing the properties of the text markup annotation
+## Edi text markup annotation properties
The color and the opacity of the text markup annotation can be edited using the Edit Color tool and the Edit Opacity tool in the annotation toolbar.
-### Editing color
+### Edit color
-The color of the annotation can be edited using the color palette provided in the Edit Color tool.
+Use the color palette in the Edit Color tool to change the annotation color.
-### Editing opacity
+### Edit opacity
-The opacity of the annotation can be edited using the range slider provided in the Edit Opacity tool.
+Use the range slider in the Edit Opacity tool to change annotation opacity.
-## Setting default properties during the control initialization
+## Set default properties during control initialization
-The properties of the text markup annotation can be set before creating the control using the highlightSettings, underlineSettings, strikethroughSettings and squigglySettings.
+Set default properties before creating the control using `highlightSettings`, `underlineSettings`, `strikethroughSettings`, and `squigglySettings`.
->After editing the default color and opacity using the Edit Color tool and Edit Opacity tool, they will be changed to the selected values.
+> After editing default color and opacity using the Edit Color and Edit Opacity tools, the values update to the selected settings.
Refer to the following code sample to set the default annotation settings.
@@ -1248,22 +1248,22 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Performing undo and redo
+## Perform undo and redo
-The PDF Viewer performs undo and redo for the changes made in the PDF document. In the text markup annotation, undo and redo actions are provided for:
+The PDF Viewer supports undo and redo for changes. For text markup annotations, undo and redo are provided for:
* Inclusion of the text markup annotations.
* Deletion of the text markup annotations.
* Change of either color or opacity of the text markup annotations.
-The undo and redo actions can be done in the following ways:
+Undo and redo actions can be performed in the following ways:
-1. Using the keyboard shortcuts:
- After performing a text markup annotation action, you can undo it by using the Ctrl + Z shortcut and redo by using the Ctrl + Y shortcut.
-2. Using toolbar:
- The Undo and redo can be done using the **Undo** tool and **Redo** tool provided in the toolbar.
+1. Using keyboard shortcuts:
+ After performing a text markup annotation action, press Ctrl+Z to undo and Ctrl+Y to redo.
+2. Using the toolbar:
+ Use the **Undo** and **Redo** tools in the toolbar.
-Refer to the following code sample for calling undo and redo actions from the client-side.
+Refer to the following code snippet to call undo and redo actions from the client side.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -1353,17 +1353,17 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-## Saving the text markup annotation
+## Save text markup annotations
-When you click the download tool in the toolbar, the text markup annotations will be saved in the PDF document. This action will not affect the original document.
+Click the download tool in the toolbar to save text markup annotations to the PDF document. The original document is not modified.
-## Printing the text markup annotation
+## Print text markup annotations
-When the print tool is selected in the toolbar, the PDF document will be printed along with the text markup annotations added to the pages. This action will not affect the original document.
+Click the print tool in the toolbar to print the PDF document with text markup annotations. The original document is not modified.
-## Disabling text markup annotation
+## Disable text markup annotation
-The PDF Viewer control provides an option to disable the text markup annotation feature. The code sample for disabling the feature is as follows.
+Disable text markup annotations using the `enableTextMarkupAnnotation` property.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/download.md b/Document-Processing/PDF/PDF-Viewer/angular/download.md
index f6b68dd29..b60f7ffbd 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/download.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/download.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Download in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Download in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Download in Angular PDF Viewer component | Syncfusion
+description: Learn here all about Download in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Download
documentation: ug
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/events.md b/Document-Processing/PDF/PDF-Viewer/angular/events.md
new file mode 100644
index 000000000..8dd049f3a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/events.md
@@ -0,0 +1,3176 @@
+---
+layout: post
+title: Events in Angular PDF Viewer | Syncfusion
+description: Comprehensive list of events in the Syncfusion Angular PDF Viewer with descriptions, event arguments, and usage examples to integrate custom logic.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Events in Angular PDF Viewer
+
+The PDF Viewer component triggers events for creation, page navigation, document life cycle, context menu interactions, comments, bookmarks, download and export, hyperlinks, annotation import/export, custom keyboard commands, printing, signatures, text search, and text selection. Use these events to integrate custom logic into application workflows.
+
+The following table lists commonly used events supported by the PDF Viewer component:
+
+| Event | Description |
+| ----- | ----------- |
+| [`bookmarkClick`](#bookmarkclick) | Triggers when a bookmark item is clicked in the bookmark panel. |
+| [`buttonFieldClick`](#buttonfieldclick) | Triggers when a button form field is clicked. |
+| [`commentAdd`](#commentadd) | Triggers when a comment is added to the comment panel. |
+| [`commentDelete`](#commentdelete) | Triggers when a comment is deleted from the comment panel. |
+| [`commentEdit`](#commentedit) | Triggers when a comment is edited in the comment panel. |
+| [`commentSelect`](#commentselect) | Triggers when a comment is selected in the comment panel. |
+| [`commentStatusChanged`](#commentstatuschanged) | Triggers when a comment’s status changes in the comment panel. |
+| [`created`](#created) | Triggers during the creation of the PDF Viewer component. |
+| [`customContextMenuBeforeOpen`](#customcontextmenubeforeopen) | Fires before the custom context menu opens. |
+| [`customContextMenuSelect`](#customcontextmenuselect) | Fires when a custom context menu item is selected. |
+| [`documentLoad`](#documentload) | Triggers while loading a document into the PDF Viewer. |
+| [`documentLoadFailed`](#documentloadfailed) | Triggers when document loading fails. |
+| [`documentUnload`](#documentunload) | Triggers when the document is closed. |
+| [`downloadEnd`](#downloadend) | Triggers after a document is downloaded. |
+| [`downloadStart`](#downloadstart) | Triggers when the download action is initiated. |
+| [`exportFailed`](#exportfailed) | Triggers when exporting annotations fails. |
+| [`exportStart`](#exportstart) | Triggers when exporting annotations starts. |
+| [`exportSuccess`](#exportsuccess) | Triggers when annotations are exported successfully. |
+| [`extractTextCompleted`](#extracttextcompleted) | Triggers when text extraction is completed. |
+| [`hyperlinkClick`](#hyperlinkclick) | Triggers when a hyperlink is clicked. |
+| [`hyperlinkMouseOver`](#hyperlinkmouseover) | Triggers when hovering over a hyperlink. |
+| [`importFailed`](#importfailed) | Triggers when importing annotations fails. |
+| [`importStart`](#importstart) | Triggers when importing annotations starts. |
+| [`importSuccess`](#importsuccess) | Triggers when annotations are imported successfully. |
+| [`keyboardCustomCommands`](#keyboardcustomcommands) | Triggers when customized keyboard command keys are pressed. |
+| [`moveSignature`](#movesignature) | Triggers when a signature is moved across the page. |
+| [`pageChange`](#pagechange) | Triggers when the current page number changes. |
+| [`pageClick`](#pageclick) | Triggers when a mouse click occurs on a page. |
+| [`pageMouseover`](#pagemouseover) | Triggers when moving the mouse over a page. |
+| [`pageOrganizerSaveAs`](#pageorganizersaveas) | Triggers when a `save as` action is performed in the page organizer. |
+| [`pageRenderComplete`](#pagerendercomplete) | Triggers after a page finishes rendering. |
+| [`pageRenderInitiate`](#pagerenderinitiate) | Triggers when page rendering begins. |
+| [`printEnd`](#printend) | Triggers when a print action is completed. |
+| [`printStart`](#printstart) | Triggers when a print action is initiated. |
+| [`removeSignature`](#removesignature) | Triggers when a signature is removed. |
+| [`resizeSignature`](#resizesignature) | Triggers when a signature is resized. |
+| [`resourcesLoaded`](#resourcesloaded) | Triggers after PDFium resources are loaded. |
+| [`signaturePropertiesChange`](#signaturepropertieschange) | Triggers when signature properties are changed. |
+| [`signatureSelect`](#signatureselect) | Triggers when a signature is selected. |
+| [`signatureUnselect`](#signatureunselect) | Triggers when a signature is unselected. |
+| [`textSearchComplete`](#textsearchcomplete) | Triggers when a text search is completed. |
+| [`textSearchHighlight`](#textsearchhighlight) | Triggers when the searched text is highlighted. |
+| [`textSearchStart`](#textsearchstart) | Triggers when a text search is initiated. |
+| [`textSelectionEnd`](#textselectionend) | Triggers when text selection is complete. |
+| [`textSelectionStart`](#textselectionstart) | Triggers when text selection is initiated. |
+| [`thumbnailClick`](#thumbnailclick) | Triggers when a thumbnail is clicked. |
+| [`toolbarClick`](#toolbarclick) | Triggers when a toolbar item is clicked. |
+| [`validateFormFields`](#validateformfields) | Triggers when form field validation fails. |
+| [`zoomChange`](#zoomchange) | Triggers when the magnification value changes. |
+
+Note: For annotation and signature events, see the dedicated Annotations Events topic.
+
+## bookmarkClick
+
+The [bookmarkClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#bookmarkclickevent) event triggers when a bookmark item is clicked in the bookmark panel.
+
+- Event arguments: [BookmarkClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/bookmarkClickEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## toolbarClick
+
+The [toolbarClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#toolbarclickevent) event triggers when a toolbar item is clicked. Use it to handle actions based on the clicked item's id or name.
+
+- Event arguments: `ClickEventArgs`.
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## validateFormFields
+
+The [validateFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#validateformfieldsevent) 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](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/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:
+
+```ts
+// app.component.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.component.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);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+Tip
+- To require a field programmatically, set isRequired: true when creating or editing the field via Form Designer APIs.
+
+## zoomChange
+
+The [zoomChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#zoomchangeevent) event triggers when the magnification value changes.
+
+- Event arguments: [ZoomChangeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/zoomChangeEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}%`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## buttonFieldClick
+
+The [buttonFieldClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#buttonfieldclickevent) event triggers when a button form field is clicked.
+
+- Event arguments: [ButtonFieldClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/buttonFieldClickEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## commentAdd
+
+The [commentAdd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#commentaddevent) event triggers when a comment is added in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## commentDelete
+
+The [commentDelete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#commentdeleteevent) event triggers when a comment is deleted in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## commentEdit
+
+The [commentEdit](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#commenteditevent) event triggers when a comment is edited in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## commentSelect
+
+The [commentSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#commentselectevent) event triggers when a comment is selected in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## commentStatusChanged
+
+The [commentStatusChanged](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#commentstatuschangedevent) event triggers when a comment status is changed in the comment panel.
+
+- Event arguments: [CommentEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/commentEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## created
+
+The [created](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#createdevent) event is triggered during the creation of the PDF Viewer component.
+
+- Event arguments: `void`.
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## customContextMenuBeforeOpen
+
+The [customContextMenuBeforeOpen](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#customcontextmenubeforeopenevent) 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](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/customContextMenuBeforeOpenEventArgs/)
+ - name: Event name
+ - ids: Array of menu item ids that will be shown; remove ids to hide items for this open
+
+Example:
+
+```ts
+// app.component.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.component.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);
+ }
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## customContextMenuSelect
+
+The [customContextMenuSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#customcontextmenuselectevent) event fires when a custom menu item is clicked. Use it to branch logic by the clicked item's id.
+
+- Event arguments: [CustomContextMenuSelectEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/customContextMenuSelectEventArgs/).
+
+- name: Event name
+- id: The id of the clicked menu item
+
+Example:
+
+```ts
+// app.component.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.component.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);
+ }
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## documentLoad
+
+The [documentLoad](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#documentloadevent) event occurs after a document is successfully loaded and parsed.
+
+- Event arguments: [LoadEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/loadEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## documentLoadFailed
+
+The [documentLoadFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#documentloadfailedevent) event triggers when loading a document fails.
+
+- Event arguments: [LoadFailedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/loadFailedEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## documentUnload
+
+The [documentUnload](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#documentunloadevent) event triggers when closing the current document.
+
+- Event arguments: [UnloadEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/unloadEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## downloadEnd
+
+The [downloadEnd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#downloadendevent) event triggers after a document download completes.
+
+- Event arguments: [DownloadEndEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/downloadEndEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## downloadStart
+
+The [downloadStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#downloadstartevent) event triggers when the download operation is initiated.
+
+- Event arguments: [DownloadStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/downloadStartEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## exportFailed
+
+The [exportFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#exportfailedevent) event triggers when exporting annotations fails.
+
+- Event arguments: [ExportFailureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportFailureEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## exportStart
+
+The [exportStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#exportstartevent) event triggers when exporting annotations starts.
+
+- Event arguments: [ExportStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportStartEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## exportSuccess
+
+The [exportSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#exportsuccessevent) event triggers when annotations are exported successfully.
+
+- Event arguments: [ExportSuccessEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/exportSuccessEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## extractTextCompleted
+
+The [extractTextCompleted](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#extracttextcompletedevent) event triggers when text extraction completes.
+
+- Event arguments: [ExtractTextCompletedEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/extractTextCompletedEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## hyperlinkClick
+
+The [hyperlinkClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#hyperlinkclickevent) event triggers when a hyperlink is clicked.
+
+- Event arguments: [HyperlinkClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/hyperlinkClickEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## hyperlinkMouseOver
+
+The [hyperlinkMouseOver](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#hyperlinkmouseoverevent) event triggers when hovering over a hyperlink.
+
+- Event arguments: HyperlinkMouseOverArgs.
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## importFailed
+
+The [importFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#importfailedevent) event triggers when importing annotations fails.
+
+- Event arguments: [ImportFailureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/importFailureEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## importStart
+
+The [importStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#importstartevent) event triggers when importing annotations starts.
+
+- Event arguments: [ImportStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/importStartEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## importSuccess
+
+The [importSuccess](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#importsuccessevent) event triggers when annotations are imported successfully.
+
+- Event arguments: [ImportSuccessEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/importSuccessEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## keyboardCustomCommands
+
+The [keyboardCustomCommands](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#keyboardcustomcommandsevent) event triggers when customized keyboard command keys are pressed.
+
+- Event arguments: [KeyboardCustomCommandsEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/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 to handle custom keyboard shortcuts.
+
+Refer to [Keyboard interaction](./accessibility#keyboard-interaction) for details about adding and handling custom shortcut keys.
+Example:
+
+```ts
+// app.component.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.component.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);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## moveSignature
+
+The [moveSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#movesignatureevent) event triggers when a signature is moved across the page.
+
+- Event arguments: `MoveSignatureEventArgs`.
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## pageChange
+
+The [pageChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#pagechangeevent) event triggers when the current page number changes (for example, via scrolling or navigation controls).
+
+- Event arguments: [PageChangeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageChangeEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## pageClick
+
+The [pageClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#pageclickevent) event triggers when a mouse click occurs on a page.
+
+- Event arguments: [PageClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageClickEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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})`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## pageMouseover
+
+The [pageMouseover](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#pagemouseoverevent) event triggers when the mouse moves over a page.
+
+- Event arguments: `PageMouseoverEventArgs`.
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## pageOrganizerSaveAs
+
+The [pageOrganizerSaveAs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#pageorganizersaveasevent) event triggers when a Save As action is performed in the page organizer.
+
+- Event arguments: `PageOrganizerSaveAsEventArgs`.
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## pageRenderComplete
+
+The [pageRenderComplete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#pagerendercompleteevent) event triggers after a page finishes rendering.
+
+- Event arguments: [PageRenderCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageRenderCompleteEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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.`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## pageRenderInitiate
+
+The [pageRenderInitiate](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#pagerenderinitiateevent) event triggers when page rendering begins.
+
+- Event arguments: [PageRenderInitiateEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageRenderInitiateEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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.`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## printEnd
+
+The [printEnd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#printendevent) event triggers when a print action completes.
+
+- Event arguments: [PrintEndEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/printEndEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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.');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## printStart
+
+The [printStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#printstartevent) event triggers when a print action is initiated.
+
+- Event arguments: [PrintStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/printStartEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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.');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## removeSignature
+
+The [removeSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#removesignatureevent) event triggers when a signature is removed.
+
+- Event arguments: [RemoveSignatureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/removeSignatureEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## resizeSignature
+
+The [resizeSignature](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#resizesignatureevent) event triggers when a signature is resized.
+
+- Event arguments: [ResizeSignatureEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/resizeSignatureEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## resourcesLoaded
+
+The [resourcesLoaded](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#resourcesloadedevent) event triggers after the viewer's required resources are loaded.
+
+- Event arguments: `void`.
+
+Example:
+
+```ts
+// app.component.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.component.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.');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## signaturePropertiesChange
+
+The [signaturePropertiesChange](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#signaturepropertieschangeevent) event triggers when signature properties change.
+
+- Event arguments: [SignaturePropertiesChangeEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/signaturePropertiesChangeEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## signatureSelect
+
+The [signatureSelect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#signatureselectevent) event triggers when a signature is selected.
+
+- Event arguments: [SignatureSelectEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/signatureSelectEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## signatureUnselect
+
+The [signatureUnselect](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#signatureunselectevent) event triggers when a signature is unselected.
+
+- Event arguments: [SignatureUnselectEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/signatureUnselectEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## textSearchComplete
+
+The [textSearchComplete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#textsearchcompleteevent) event triggers when a text search completes.
+
+- Event arguments: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearchCompleteEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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.');
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## textSearchHighlight
+
+The [textSearchHighlight](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#textsearchhighlightevent) event triggers when searched text is highlighted.
+
+- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearchHighlightEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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.`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## textSearchStart
+
+The [textSearchStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#textsearchstartevent) event triggers when a text search is initiated.
+
+- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearchStartEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}"`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## textSelectionEnd
+
+The [textSelectionEnd](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#textselectionendevent) event triggers when text selection is complete.
+
+- Event arguments: [TextSelectionEndEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSelectionEndEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}.`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## textSelectionStart
+
+The [textSelectionStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#textselectionstartevent) event triggers when text selection is initiated.
+
+- Event arguments: `TextSelectionStartEventArgs`.
+
+Example:
+
+```ts
+// app.component.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.component.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}.`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+## thumbnailClick
+
+The [thumbnailClick](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/#thumbnailclickevent) event triggers when a thumbnail is clicked.
+
+- Event arguments: [ThumbnailClickEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/thumbnailClickEventArgs/).
+
+Example:
+
+```ts
+// app.component.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.component.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}.`);
+ }
+}
+```
+
+```html
+
+
+
+```
+
+> Tip: For annotation and signature-specific events and arguments, see the dedicated Annotations Events topic.
+
+See also:
+
+- [Annotation events](./annotation/annotation-event)
+- [Form field events](./form-designer/form-field-events)
+- [Organize PDF events](./organize-pdf/organize-pdf-events)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/feature-module.md b/Document-Processing/PDF/PDF-Viewer/angular/feature-module.md
index 4cc1dddb6..ac3ebbc2b 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/feature-module.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/feature-module.md
@@ -1,18 +1,18 @@
---
layout: post
-title: Feature module in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Feature module in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Feature module in Angular PDF Viewer component | Syncfusion
+description: Learn here all about Feature module in Syncfusion Angular PDF Viewer component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Feature module
documentation: ug
domainurl: ##DomainURL##
---
-# Feature modules
+# Feature modules in Angular PDF Viewer
The [`Angular PDF Viewer`](https://www.syncfusion.com/pdf-viewer-sdk) features are segregated into individual feature-wise modules to enable selectively referencing in the application. The required modules should be injected to extend its functionality. The following are the selective modules of PDF Viewer that can be included as required:
-The available PdfViewer modules are:
+The available PDF Viewer modules are:
* **Toolbar**:- Built-in toolbar for better user interaction.
* **Magnification**:- Perform zooming operation for better viewing experience.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md
index 0153bd8d5..6db092f4d 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/form-designer/create-programmatically.md
@@ -1,29 +1,29 @@
---
layout: post
-title: Create programmatically in Angular Pdfviewer component | Syncfusion
-description: Learn here all about Create programmatically in Syncfusion Angular Pdfviewer component of Syncfusion Essential JS 2 and more.
+title: Create form fields in the Angular PDF Viewer component | Syncfusion
+description: Learn here all about Create programmatically in Syncfusion Angular PDF Viewer control of Syncfusion Essential JS 2 and more.
platform: document-processing
control: Create programmatically
documentation: ug
domainurl: ##DomainURL##
---
-# Create form fields programmatically
+# Create programmatically in Angular Pdf viewer control
-The PDF Viewer control provides the option to add, edit and delete the Form Fields. The Form Fields type supported by the PDF Viewer Control are:
+The PDF Viewer component provides options to add, edit, and delete form fields. The supported form field types are:
- * Textbox
- * Password
- * CheckBox
- * RadioButton
- * ListBox
- * DropDown
- * SignatureField
- * InitialField
+- Textbox
+- Password
+- CheckBox
+- RadioButton
+- ListBox
+- DropDown
+- Signature field
+- Initial field
## Add a form field to PDF document programmatically
-Using addFormField method, the form fields can be added to the PDF document programmatically. We need to pass two parameters in this method. They are Form Field Type and Properties of Form Field Type. To add form field programmatically, Use the following code.
+Use the addFormField method to add form fields programmatically. Pass the form field type and the corresponding property object as parameters. The following example demonstrates adding multiple fields on document load.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -90,8 +90,7 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-N> To set up the **server-backed PDF Viewer**,
-Add the below serviceUrl in the `app.component.ts` file
+N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
@@ -99,7 +98,7 @@ Within the template, configure the PDF Viewer by adding the `[serviceUrl]='servi
## Edit/Update form field programmatically
-Using updateFormField method, Form Field can be updated programmatically. We should get the Form Field object/Id from FormFieldCollections property that you would like to edit and pass it as a parameter to updateFormField method. The second parameter should be the properties that you would like to update for Form Field programmatically. We have updated the value and background Color properties of Textbox Form Field.
+Use the updateFormField method to modify a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it as the first parameter. Provide the properties to update as the second parameter. The following example updates the background color of a Textbox field.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -167,8 +166,7 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-N> To set up the **server-backed PDF Viewer**,
-Add the below serviceUrl in the `app.component.ts` file
+N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
@@ -176,7 +174,7 @@ Within the template, configure the PDF Viewer by adding the `[serviceUrl]='servi
## Delete form field programmatically
-Using deleteFormField method, the form field can be deleted programmatically. We should retrieve the Form Field object/Id from FormFieldCollections property that you would like to delete and pass it as a parameter to deleteFormField method. To delete a Form Field programmatically, use the following code.
+Use the deleteFormField method to remove a form field programmatically. Retrieve the target field from the formFieldCollections property (by object or ID) and pass it to deleteFormField. The following example deletes the first form field.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
@@ -244,8 +242,7 @@ export class AppComponent implements OnInit {
{% endhighlight %}
{% endtabs %}
-N> To set up the **server-backed PDF Viewer**,
-Add the below serviceUrl in the `app.component.ts` file
+N> To configure the server-backed PDF Viewer, add the following `serviceUrl` in the `index.ts` file:
`public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer'`;
Within the template, configure the PDF Viewer by adding the `[serviceUrl]='service'` attribute inside the div element.
@@ -294,11 +291,11 @@ removeSignature() {
## Saving the form fields
-When the download icon is selected on the toolbar, the Form Fields will be saved in the PDF document and this action will not affect the original document. Refer the below GIF for further reference.
+Selecting the Download icon on the toolbar saves the form fields in the exported PDF without modifying the original document. See the following GIF for reference.
-
+
-You can invoke download action using following code snippet.
+You can invoke the print action using the following code snippet:
```html
+
+
+
+
+
+
+
+
+