+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ getViewer() {
+ return (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ }
+
+ undoAnnotation() {
+ this.getViewer().undo();
+ }
+
+ redoAnnotation() {
+ this.getViewer().redo();
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotation/create-modify-annotation)
+- [Customize Annotation](../../annotation/customize-annotation)
+- [Remove Annotation](../../annotation/delete-annotation)
+- [Handwritten Signature](../../annotation/signature-annotation)
+- [Export and Import Annotation](../../annotations/export-import/export-annotation)
+- [Annotation in Mobile View](../../annotation/annotations-in-mobile-view)
+- [Annotation Events](../../annotation/annotation-event)
+- [Annotations API](../annotation/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md
index 52797becd8..d8c90b3507 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/comments.md
@@ -1,168 +1,602 @@
---
layout: post
-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.
+title: Comments in Angular PDF Viewer | Syncfusion
+description: Learn how to add, reply to, edit, set status for, delete, and read comments for annotations in the Syncfusion Angular PDF Viewer.
platform: document-processing
-control: Comments
+control: PDF Viewer
documentation: ug
domainurl: ##DomainURL##
---
-# Comments in Angular PDF Viewer control
+# Comments in Angular PDF Viewer
-The PDF Viewer control provides options to add, edit, and delete comments for the following annotations in PDF documents:
+The PDF Viewer lets you add, edit, reply to, set status for, and delete comments on the following annotation types:
-* Shape annotation
-* Stamp annotation
-* Sticky note annotation
-* Measurement annotation
-* Text markup annotation
-* Free text annotation
-* Ink annotation
+* Shape annotation
+* Stamp annotation
+* Sticky note annotation
+* Measurement annotation
+* Text markup annotation
+* Free text annotation
+* Ink annotation
-
+
-## Adding a comment to the annotation
+## Add a comment to an annotation (UI)
-Annotation comments, replies, and status can be managed in the PDF document using the comment panel.
+Use the **Comments panel** to manage annotation comments, replies, and status.
-### Comment panel
+### Open the Comments panel
+Open the panel in any of these ways:
-Annotation comments can be added to the PDF using the comment panel. The comment panel can be opened in the following ways:
+1. **Annotation toolbar**
+ * Click **Edit Annotation** in the toolbar to show the secondary toolbar.
+ * Click **Comment Panel** to open the panel.
+2. **Context menu**
+ * Select an annotation and **right‑click** it.
+ * Choose **Comment** from the context menu.
+3. **Double‑click**
+ * Select the annotation and **double‑click** it to open the panel.
-1. Using the annotation menu
+If the panel is already open, selecting an annotation highlights its thread so you can view or add comments.
- * Click the Edit Annotation button in the PDF Viewer toolbar. A toolbar appears below it.
- * Click the Comment Panel button. The comment panel opens.
+### Add comments and replies
+- Select the annotation in the PDF.
+- The corresponding thread is highlighted in the Comments panel.
+- Add comments and any number of replies in the panel.
-2. Using Context menu
+
- * Select the annotation in the PDF document and right-click it.
- * Select Comment from the context menu..
+### Set comment or reply status
+- Select a comment in the panel.
+- Click **More options** on the comment or reply container.
+- Choose **Set Status**, then pick a status.
-3. Using the Mouse click
-
- * Select the annotation in the PDF document and double-click it. The comment panel opens.
+
-If the comment panel is already open, select the annotation and add comments using the panel.
+### Edit comments and replies
+You can edit comments in two ways:
-### Adding comments
+1. **Context menu**
+ * Select the comment in the panel and click **More options**.
+ * Choose **Edit** to switch to an editable text box.
+2. **Mouse double‑click**
+ * Double‑click the comment or reply to edit its content.
-* 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.
+
-
+### Delete comments or replies
+- Select the comment in the panel.
+- Click **More options** → **Delete**.
-### Adding Comment Replies
+
-* Multiple replies can be added to a comment.
-* After adding a comment, add replies as needed.
+> Deleting the **root** comment from the Comments panel also deletes the associated annotation.
-### Adding Comment or Reply Status
+---
-* 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.
+## Add Comments to the annotation Programmatically
-
+### Add comments and replies programmatically
-### Editing the comments and comments replies of the annotations
+Comments can be added to the PDF document programmatically using the `editAnnotation` property.
-Comments, replies, and status can be edited using the comment panel.
+The following example Shows how to add comments and reply in response to a button click.
-### Editing the Comment or Comment Replies
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+ ]
+})
+export class AppComponent {
+
+ @ViewChild('pdfViewer')
+ public pdfViewer!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public serviceUrl: string = 'YOUR_SERVICE_URL';
+
+ public addComment(): void {
+ const viewer = this.pdfViewer;
+ if (!viewer) return;
+ const annot = viewer.annotationCollection?.[0];
+ if (annot) {
+ annot.commentType = 'add';
+ annot.note = 'New Comment';
+ viewer.annotation.editAnnotation(annot);
+ console.log(viewer.annotationCollection?.[0]);
+ }
+ }
- * 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.
+ public addReply(): void {
+ const viewer = this.pdfViewer;
+ if (!viewer) return;
+ const annot = viewer.annotationCollection?.[0];
+ if (annot) {
+ annot.commentType = 'add';
+ annot.replyComment = ['Reply Comment'];
+ viewer.annotation.editAnnotation(annot);
+ console.log(viewer.annotationCollection?.[0]);
+ }
+ }
+}
-2. Using the Mouse Click
+{% endhighlight %}
+{% endtabs %}
- * 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.
+### Edit comments and replies programmatically
-### Editing Comment or Reply Status
+Comments can be edited in the PDF document programmatically using the `editAnnotation` property.
-* 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.
+The following example Shows how to edit comments and reply in response to a button click.
-
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+ ]
+})
+export class AppComponent {
+
+ @ViewChild('pdfViewer')
+ public pdfViewer!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public serviceUrl: string = 'YOUR_SERVICE_URL';
+
+ public editComment(): void {
+ const viewer = this.pdfViewer;
+ if (!viewer) return;
+ const annot = viewer.annotationCollection?.[0];
+ if (annot) {
+ annot.commentType = 'edit';
+ annot.note = 'Edited Comment';
+ viewer.annotation.editAnnotation(annot);
+ console.log(viewer.annotationCollection?.[0]);
+ }
+ }
-
+ public editReply(): void {
+ const viewer = this.pdfViewer;
+ if (!viewer) return;
+ const annot = viewer.annotationCollection?.[0];
+ if (annot) {
+ annot.commentType = 'edit';
+ annot.replyComment = ['Edited Reply Comment'];
+ viewer.annotation.editAnnotation(annot);
+ console.log(viewer.annotationCollection?.[0]);
+ }
+ }
+}
-N> Deleting the root comment from the comment panel also deletes the associated annotation.
+{% endhighlight %}
+{% endtabs %}
-## How to check the comments added by the user
+### Read comments added by users
Comments added to the PDF document can be read using the annotation's `comments` property.
The following example logs comments in response to a button click.
{% tabs %}
-{% highlight html tabtitle="Standalone" %}
-
-```html
-
-
-
-
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+ ]
+})
+export class AppComponent {
+
+ @ViewChild('pdfViewer')
+ public pdfViewer!: 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';
+
+ public checkComments(): void {
+ const viewer = this.pdfViewer;
+ if (!viewer) return;
+
+ const annotationCollections = viewer.annotationCollection || [];
+ for (let x = 0; x < annotationCollections.length; x++) {
+ console.log('annotation Id : ' + annotationCollections[x].annotationId);
+ const comments = annotationCollections[x].comments || [];
+ for (let y = 0; y < comments.length; y++) {
+ const comment = comments[y];
+ console.log('comment[' + y + '] : ' + comment.note);
+ }
+ const note = annotationCollections[x].note;
+ console.log('note : ' + note);
+ }
+ }
+}
-```
-{% endhighlight %}
-{% highlight html tabtitle="Server-Backed" %}
-
-```html
-
-
-
-
-
-```
{% endhighlight %}
{% endtabs %}
+## Annotation and Review Workflow Patterns
-```typescript
-//Method to check the comments added in the PDF document.
-checkComments(){
- var pdfviewer = (document.getElementById("pdfViewer")).ej2_instances[0];
- var annotationCollections = pdfviewer.annotationCollection;
- for (var x = 0; x < annotationCollections.length; x++) {
- //Prints the annotation id in the console window.
- console.log(annotationCollections[x].annotationId);
- var comments = annotationCollections[x].comments;
- for (var y = 0; y < comments.length; y++) {
- var comment = comments[y];
- //Prints the PDF document's comments in the console window.
- console.log("comment" + "[" + y + "] :" + comment.note);
- }
- var note = annotationCollections[x].note;
- console.log("note : " + note);
- }
-}
+The PDF Viewer supports review workflows by combining [annotations](../annotation/overview), [comments](../annotation/comments), and threaded [replies](../annotation/comments#add-comments-and-replies). These capabilities help reviewers mark content, discuss changes, and navigate feedback efficiently during document review cycles.
+
+### Understanding Review Workflows
+
+Annotations act as visual markers during review—such as [highlights](../annotation/annotation-types/highlight-annotation), [shapes](../annotation/annotation-types/area-annotation), [stamps](../annotation/annotation-types/stamp-annotation), or [sticky notes](../annotation/annotation-types/sticky-notes) while [comments](../annotation/comments) provide a communication space attached to each annotation. Multiple reviewers can participate in these annotation threads, making the review process more organized and traceable.
+
+During a review cycle, users typically:
+
+- Add annotations to indicate a change, highlight text, or mark an issue.
+
+- Use comments to explain the purpose of the annotation.
+
+- Reply to comments to maintain a review discussion thread.
+- Navigate between comments and related annotations for clarity.
+- Finalize review by addressing or resolving each thread.
+
+### Using Comments in Review Workflows
+
+Comments are a key part of review workflows. They allow reviewers to communicate directly on annotations without altering the underlying PDF content.
+
+Key behaviors in review workflows:
+
+- Comments allow multiple reviewers to discuss changes directly on annotations.
+ - Replies help maintain a threaded discussion during review.
+- Selecting a comment highlights the related annotation, improving navigation.
+- Comments can be combined with Sticky Notes, Highlights, Shapes, Stamps, and other annotation types.
+
+
+
+### Why Review Workflow Patterns Matter
+
+Review workflows help teams:
+
+- Centralize feedback inside the PDF document itself.
+- Maintain a clear discussion history on each annotation.
+- Avoid duplicated or conflicting feedback.
+- Navigate long documents quickly using comment threads.
+ - Improve clarity when multiple reviewers participate.
-```
+These review patterns are especially useful in content editing, design review, legal documentation, product validation, and quality control workflows.
-[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Annotations/How%20to%20check%20the%20comments)
\ No newline at end of file
+## See also
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Remove Annotation](../annotation/delete-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotationsannotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/create-modify-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/create-modify-annotation.md
new file mode 100644
index 0000000000..c842d7853c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/create-modify-annotation.md
@@ -0,0 +1,199 @@
+---
+layout: post
+title: Create and modify annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to create and modify annotations in Syncfusion Angular PDF Viewer with UI and programmatic examples, plus quick links to all annotation types.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Create and modify annotations in Angular PDF Viewer
+
+The PDF Viewer annotation tools add, edit, and manage markups across documents. This page provides an overview with quick navigation to each annotation type and common creation and modification workflows.
+
+## Quick navigation to annotation types
+
+Jump directly to a specific annotation type for detailed usage and examples:
+
+**TextMarkup annotations:**
+- Highlight: [Highlight annotation](./annotation-types/highlight-annotation)
+- Strikethrough: [Strikethrough annotation](./annotation-types/strikethrough-annotation)
+- Underline: [Underline annotation](./annotation-types/underline-annotation)
+- Squiggly: [Squiggly annotation](./annotation-types/Squiggly-annotation)
+
+**Shape annotations:**
+- Line: [Line annotation](./annotation-types/line-annotation)
+- Arrow: [Arrow annotation](./annotation-types/arrow-annotation)
+- Rectangle: [Rectangle annotation](./annotation-types/rectangle-annotation)
+- Circle : [Circle annotation](./annotation-types/circle-annotation)
+- Polygon: [Polygon annotation](./annotation-types/polygon-annotation)
+
+**Measurement annotations:**
+- Distance: [Distance annotation](./annotation-types/distance-annotation)
+- Perimeter: [Perimeter annotation](./annotation-types/perimeter-annotation)
+- Area: [Area annotation](./annotation-types/area-annotation)
+- Radius: [Radius annotation](./annotation-types/ra)
+- Volume: [Volume annotation](./annotation-types/vo)
+
+**Other annotations:**
+- Redaction: [Redaction annotation](./annotation-types/redaction-annotation)
+- Free Text: [Free text annotation](./annotation-types/free-text-annotation)
+- Ink (Freehand): [Ink annotation](./annotation-types/ink-annotation)
+- Stamp: [Stamp annotation](./annotation-types/stamp-annotation)
+- Sticky Notes: [Sticky notes annotation](./annotation-types/sticky-notes-annotation)
+
+N> Each annotation type page includes both UI steps and programmatic examples specific to that type.
+
+## Create annotations
+
+### Create via UI
+- Open the annotation toolbar in the PDF Viewer.
+- Choose the required tool (for example, Shape, Free text, Ink, Stamp, Redaction).
+- Click or drag on the page to place the annotation.
+
+
+
+**Note:**
+- When pan mode is active and a shape or stamp tool is selected, the viewer switches to text select mode automatically.
+- Property pickers in the annotation toolbar let users choose color, stroke color, thickness, and opacity while drawing
+
+### Create programmatically
+
+Creation patterns vary by type. Refer to the individual annotation pages for tailored code.
+
+Example: creating a Rectangle annotation using [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService],
+ template: `
+
+
+
+ `
+})
+export class AppComponent {
+ 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';
+
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ }
+
+ addRedactionAnnotation(): void {
+ const viewer = this.getViewer();
+ viewer.annotation.addAnnotation('Redaction', {
+ bound: { x: 200, y: 480, width: 150, height: 75 },
+ pageNumber: 1,
+ markerFillColor: '#0000FF',
+ markerBorderColor: 'white',
+ fillColor: 'red',
+ overlayText: 'Confidential',
+ fontColor: 'yellow',
+ fontFamily: 'Times New Roman',
+ fontSize: 8,
+ beforeRedactionsApplied: false
+ });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+Refer to the individual annotation pages for enabling draw modes from UI buttons and other type-specific creation samples.
+
+## Modify annotations
+
+### Modify via UI
+
+Use the annotation toolbar after selecting an annotation:
+- Edit color: change the fill or text color (when applicable)
+
+
+
+- Edit stroke color: change the border or line color (shape and line types)
+
+
+
+- Edit thickness: adjust the border or line thickness
+
+
+
+- Edit opacity: change transparency
+
+
+
+Additional options such as Line Properties (for line/arrow) are available from the context menu (right-click > Properties) where supported.
+
+### Modify programmatically
+
+Use `editAnnotation` to apply changes to an existing annotation. Common flow:
+- Locate the target annotation from `annotationCollection`.
+- Update the desired properties.
+- Call `editAnnotation` with the modified object.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService],
+ template: `
+
+
+
+ `
+})
+export class AppComponent {
+ 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';
+
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ }
+
+ bulkEditAnnotations(): void {
+ const viewer = this.getViewer();
+ for (const ann of viewer.annotationCollection) {
+ if (ann.author === 'Guest User' && ann.subject === 'Corrections') {
+ ann.color = '#ff0000';
+ ann.opacity = 0.8;
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For type-specific edit examples (for example, editing line endings, moving stamps, or updating sticky note bounds), see the corresponding annotation type page linked above.
+
+## See also
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Remove Annotation](../annotation/delete-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/custom-data.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/custom-data.md
new file mode 100644
index 0000000000..7ae0ad551b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/custom-data.md
@@ -0,0 +1,231 @@
+---
+layout: post
+title: Custom Data in annotations in Angular PDF Viewer | Syncfusion
+description: Learn here all about how to use add custom Data in annotation in Syncfusion Angular PDF Viewer Component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Custom data in annotations in Angular
+
+Annotations can include custom key–value data via the `customData` property. This is supported at two levels:
+
+- Default level via `annotationSettings`: applies to all annotations created through the UI.
+- Per-annotation-type level: provide `customData` inside specific annotation-type settings (for example, `highlightSettings`, `rectangleSettings`).
+
+The `customData` value can be any JSON-serializable object. It is preserved during annotation export/import and is available at runtime on the annotation object.
+
+## Default custom data (annotationSettings)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+
+ 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';
+
+ // Annotation settings with custom data
+ public annotationSettings = {
+ author: 'XYZ',
+ minHeight: 10,
+ minWidth: 10,
+ maxWidth: 100,
+ maxHeight: 100,
+ // Custom data applied to all newly created annotations
+ customData: {
+ appId: 'pdf-review',
+ tenant: 'northwind',
+ featureFlags: { allowShare: true, qaStamp: false }
+ }
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Custom data for Individual Annotation
+
+Provide customData inside individual annotation-type settings when you want specific payloads for different tools.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+
+ 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';
+
+ public showCustomData(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationCollection.forEach((a: any) => {
+ console.log('Annotation', a.id, 'customData:', a.customData);
+ });
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Note
+- `customData` can be any JSON-serializable object and is stored with the annotation.
+- Use `annotationSettings.customData` for global defaults and override with per-tool settings as needed.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Customize Annotation](../annotations/customize-annotation)
+- [Remove Annotation](../annotations/delete-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation Permission](../annotations/annotation-permission)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation API](../annotations/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/custom-tools.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/custom-tools.md
new file mode 100644
index 0000000000..642793f0b0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/custom-tools.md
@@ -0,0 +1,186 @@
+---
+layout: post
+title: Custom annotation tools in Angular PDF Viewer | Syncfusion
+description: Learn how to build a custom toolbar for Syncfusion Angular PDF Viewer and switch annotation tools programmatically using setAnnotationMode.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Custom annotation tools in Angular PDF Viewer
+
+The PDF Viewer supports adding a custom toolbar and toggling annotation tools programmatically using the `setAnnotationMode` method. The viewer can enable tools such as Highlight, Underline, Rectangle, Circle, Arrow, Free Text, Ink, and measurement annotations (Distance, Perimeter, Area, Radius)
+
+Follow these steps to build a minimal custom annotation toolbar.
+
+Step 1: Start from a basic PDF Viewer sample
+
+Refer to the [Getting started guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/getting-started) to create a basic sample.
+
+Step 2: Add a lightweight custom toolbar with Angular buttons
+
+Add buttons for the tools to expose. The sample below uses plain Angular buttons for simplicity; replace with a Syncfusion ToolbarComponent for a richer UI if desired.
+
+Step 3: Import and inject modules
+
+Ensure the `Annotation` module is injected. Include text selection and search modules if those capabilities are required.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService, TextSelectionService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ getViewer() {
+ return (document.getElementById('container') as any).ej2_instances[0];
+ }
+
+ setMode(mode: string) {
+ this.getViewer().annotation.setAnnotationMode(mode);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Custom tools using Syncfusion Toolbar for a richer UI
+
+Replace the plain buttons with a Syncfusion `ToolbarComponent` and icons for a richer UI. Add the `@syncfusion/ej2-angular-navigations` package and wire each item's `clicked` handler to `setAnnotationMode`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService, TextSelectionService } from '@syncfusion/ej2-angular-pdfviewer';
+import { ToolbarModule, ClickEventArgs } from '@syncfusion/ej2-angular-navigations';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `,
+ imports: [PdfViewerModule, ToolbarModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ private modeMap: { [key: string]: string } = {
+ annHighlight: 'Highlight',
+ annUnderline: 'Underline',
+ annStrike: 'Strikethrough',
+ annRect: 'Rectangle',
+ annCircle: 'Circle',
+ annLine: 'Line',
+ annArrow: 'Arrow',
+ annPolygon: 'Polygon',
+ annFreeText: 'FreeText',
+ annInk: 'Ink',
+ annSticky: 'StickyNotes',
+ annDistance: 'Distance',
+ annPerimeter: 'Perimeter',
+ annArea: 'Area',
+ annRadius: 'Radius',
+ annNone: 'None'
+ };
+
+ getViewer() {
+ return (document.getElementById('container') as any).ej2_instances[0];
+ }
+
+ onToolbarClick(args: ClickEventArgs) {
+ const mode = this.modeMap[args.item.id];
+ if (mode) {
+ this.getViewer().annotation.setAnnotationMode(mode);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+Note
+
+- `setAnnotationMode` accepts the annotation type name. Common values include: `Highlight`, `Underline`, `Strikethrough`, `StickyNotes`, `FreeText`, `Ink`, `Rectangle`, `Circle`, `Line`, `Arrow`, `Polygon`, `Polyline`, `Distance`, `Perimeter`, `Area`, `Radius`, and `None` to exit.
+- Default annotation styles can be predefined using the corresponding settings properties (for example, `areaSettings`).
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Remove Annotation](../annotation/delete-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotations Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/customize-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/customize-annotation.md
new file mode 100644
index 0000000000..22ef177845
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/customize-annotation.md
@@ -0,0 +1,287 @@
+---
+layout: post
+title: Customize annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to customize PDF annotations in Syncfusion Angular PDF Viewer using UI tools and programmatic settings (defaults and runtime edits).
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Customize annotations in Angular
+
+Annotation appearance and behavior (for example color, stroke color, thickness, and opacity) can be customized using the built‑in UI or programmatically. This page summarizes common customization patterns and shows how to set defaults per annotation type.
+
+## Customize via UI
+
+Use the annotation toolbar after selecting an annotation:
+- Edit color: changes the annotation fill/text color
+
+- Edit stroke color: changes border or line color for shapes and lines types.
+
+- Edit thickness: adjusts border or line thickness
+
+- Edit opacity: adjusts transparency
+
+
+Type‑specific options (for example, Line properties) are available from the context menu (right‑click > Properties) where supported.
+
+## Set default properties during initialization
+
+Set defaults for specific annotation types when creating the `PdfViewer` instance. Configure properties such as author, subject, color, and opacity using annotation settings. The examples below reference settings used on the annotation type pages.
+
+Text markup annotations:
+
+- Highlight: Set default properties before creating the control using [`highlightSettings`](./annotation-types/highlight-annotation#set-properties-while-adding-individual-annotation)
+- Strikethrough: Use [`strikethroughSettings`](./annotation-types/strikethrough-annotation#set-properties-while-adding-individual-annotation)
+- Underline: Use [`underlineSettings`](./annotation-types/underline-annotation#set-properties-while-adding-individual-annotation)
+- Squiggly: Use [`squigglySettings`](./annotation-types/Squiggly-annotation#set-properties-while-adding-individual-annotation)
+
+Shape annotations:
+
+- Line: Use [`lineSettings`](./annotation-types/line-annotation#set-properties-while-adding-individual-annotation)
+- Arrow: Use [`arrowSettings`](./annotation-types/arrow-annotation#set-properties-while-adding-individual-annotation)
+- Rectangle: Use [`rectangleSettings`](./annotation-types/rectangle-annotation#set-properties-while-adding-individual-annotation)
+- Circle: Use [`circleSettings`](./annotation-types/circle-annotation#set-properties-while-adding-individual-annotation)
+- Polygon: Use [`polygonSettings`](./annotation-types/polygon-annotation#set-properties-while-adding-individual-annotation)
+
+Measurement annotations:
+
+- Distance: Use [`distanceSettings`](./annotation-types/distance-annotation#set-default-properties-during-initialization)
+- Perimeter: Use [`perimeterSettings`](./annotation-types/perimeter-annotation#set-default-properties-during-initialization)
+- Area: Use [`areaSettings`](./annotation-types/area-annotation#set-default-properties-during-initialization)
+- Radius: Use [`radiusSettings`](./annotation-types/radius-annotation#set-default-properties-during-initialization)
+- Volume: Use [`volumeSettings`](./annotation-types/volume-annotation#set-default-properties-during-initialization)
+
+Other Annotations:
+
+- Redaction: Use [`redactionSettings`](./annotation-types/redaction-annotation#default-redaction-settings-during-initialization)
+- Free text: Use [`freeTextSettings`](./annotation-types/free-text-annotation#set-default-properties-during-initialization)
+- Ink (freehand): Use [`inkAnnotationSettings`](./annotation-types/ink-annotation#customize-ink-appearance)
+- Stamp: Use [`stampSettings`](./annotation-types/stamp-annotation#set-properties-while-adding-individual-annotation)
+- Sticky notes: Use [`stickyNotesSettings`](./annotation-types/sticky-notes#set-default-properties-during-initialization)
+
+Set defaults for specific annotation types when creating the `PdfViewerComponent`. Below are examples using settings already used in the annotation type pages.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService, TextSelectionService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ // Text markup defaults
+ public highlightSettings = { author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6 };
+ public strikethroughSettings = { author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6 };
+ public underlineSettings = { author: 'Guest User', subject: 'Points to be remembered', color: '#00ffff', opacity: 0.9 };
+ public squigglySettings = { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9 };
+
+ // Shapes
+ public lineSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 };
+ public arrowSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 };
+ public rectangleSettings = { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 };
+ public circleSettings = { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 };
+ public polygonSettings = { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1 };
+
+ // Measurements
+ public distanceSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 };
+ public perimeterSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8 };
+ public areaSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' };
+ public radiusSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' };
+ public volumeSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00' };
+
+ // Others
+ public freeTextSettings = { borderColor: '#222222', thickness: 1, opacity: 1 };
+ public inkAnnotationSettings = { color: '#0000ff', thickness: 3, opacity: 0.8 };
+ public stampSettings = { opacity: 0.9 };
+ public stickyNotesSettings = { author: 'QA', subject: 'Review', color: '#ffcc00', opacity: 1 };
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> After changing defaults using UI tools (for example, Edit color or Edit opacity), the updated values apply to subsequent annotations within the same session.
+
+## Customize programmatically at runtime
+
+To update an existing annotation from code, modify its properties and call editAnnotation.
+
+Example: bulk‑update matching annotations.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService, TextSelectionService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ getViewer() {
+ return (document.getElementById('container') as any).ej2_instances[0];
+ }
+
+ bulkUpdateAnnotations() {
+ const viewer = this.getViewer();
+ for (const ann of viewer.annotationCollection) {
+ // Example criteria; customize as needed
+ if (ann.author === 'Guest' || ann.subject === 'Rectangle') {
+ ann.color = '#ff0000';
+ ann.opacity = 0.8;
+ // For shapes/lines you can also change strokeColor/thickness when applicable
+ // ann.strokeColor = '#222222';
+ // ann.thickness = 2;
+ viewer.annotation.editAnnotation(ann);
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Annotation Settings
+
+Defines the settings of the annotations. You can change annotation settings like author name, height, width etc., using the [`annotationSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationsettings) property.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService, TextSelectionService, AllowedInteraction } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ public annotationSettings = {
+ author: 'XYZ',
+ minHeight: 10,
+ minWidth: 10,
+ maxWidth: 100,
+ maxHeight: 100,
+ isLock: false,
+ skipPrint: false,
+ skipDownload: false,
+ allowedInteractions: [AllowedInteraction.Select, AllowedInteraction.Move]
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+## Customize Annotation SelectorSettings
+
+Defines the settings of annotation selector. You can customize the annotation selector using the [`annotationSelectorSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationselectorsettings) property.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService, TextSelectionService, AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ template: `
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ public annotationSelectorSettings = {
+ selectionBorderColor: 'blue',
+ resizerBorderColor: 'red',
+ resizerFillColor: '#4070ff',
+ resizerSize: 8,
+ selectionBorderThickness: 1,
+ resizerShape: 'Circle',
+ selectorLineDashArray: [5, 6],
+ resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
+ resizerCursorType: CursorType.grab
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Remove Annotation](../annotation/delete-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/delete-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/delete-annotation.md
new file mode 100644
index 0000000000..dab2af2cfe
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/delete-annotation.md
@@ -0,0 +1,89 @@
+---
+layout: post
+title: Remove annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to remove/delete PDF annotations in Syncfusion Angular PDF Viewer using UI options (context menu, toolbar, Delete key) and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Remove annotations in Angular
+
+Annotations can be removed using the built-in UI or programmatically. This page shows common methods to delete annotations in the viewer.
+
+## Delete via UI
+
+A selected annotation can be deleted in three ways:
+
+- Context menu: right-click the annotation and choose Delete.
+
+- Annotation toolbar: select the annotation and click the Delete button on the annotation toolbar.
+
+- Keyboard: select the annotation and press the `Delete` key.
+
+## Delete programmatically
+
+Annotations can be deleted programmatically either by removing the currently selected annotation or by specifying an annotation id.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { PdfViewerModule, ToolbarService, AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService]
+})
+export class AppComponent {
+ public documentPath: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ getViewer() {
+ return (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ }
+
+ deleteAnnotation() {
+ // Delete the selected annotation
+ this.getViewer().annotation.deleteAnnotation();
+ }
+
+ deleteAnnotationById() {
+ const viewer = this.getViewer();
+ // Delete the first annotation using its id from the annotation collection
+ if (viewer.annotationCollection.length > 0) {
+ viewer.annotation.deleteAnnotationById(viewer.annotationCollection[0].id);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> Deleting via the API requires the annotation to exist in the current document. Ensure an annotation is selected when using `deleteAnnotation()`, or pass a valid id to `deleteAnnotationById()`.
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/export-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/export-annotation.md
new file mode 100644
index 0000000000..be82c318a1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/export-annotation.md
@@ -0,0 +1,128 @@
+---
+layout: post
+title: Export annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to Export annotations in Syncfusion Angular PDF Viewer using UI options and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Export annotations in Angular PDF Viewer
+
+PDF Viewer provides support to export annotations. You can export annotations from the PDF Viewer in two ways:
+
+- Using the built-in UI in the Comments panel (JSON or XFDF file)
+- Programmatically (JSON, XFDF, or as an object for custom handling)
+
+## Export using the UI (Comments panel)
+
+The Comments panel provides export actions in its overflow menu:
+
+- Export annotation to JSON file
+- Export annotation to XFDF file
+
+Follow the steps to export annotations:
+
+1. Open the Comments panel in the PDF Viewer.
+2. Click the overflow menu (three dots) at the top of the panel.
+3. Choose Export annotation to JSON file or Export annotation to XFDF file.
+
+This generates and downloads the selected format containing all annotations in the current document.
+
+
+
+## Export programmatically
+
+You can export annotations from code using
+[exportAnnotation](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportannotation),
+[exportAnnotationsAsObject](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportannotationsasobject)
+and
+[exportAnnotationsAsBase64String](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportannotationsasbase64string)
+APIs.
+
+Use the following example to initialize the viewer and export annotations as JSON, XFDF, or as an object.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService,
+ AnnotationDataFormat
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService],
+ template: `
+
+
+
+
+
+
+
+
+ `
+})
+export class AppComponent {
+ 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';
+
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ }
+
+ exportAsJSON(): void {
+ this.getViewer().exportAnnotation(AnnotationDataFormat.Json);
+ }
+
+ exportAsXFDF(): void {
+ this.getViewer().exportAnnotation(AnnotationDataFormat.Xfdf);
+ }
+
+ exportAsObject(): void {
+ this.getViewer().exportAnnotationsAsObject().then((value: any) => {
+ console.log('Exported annotation object:', value);
+ });
+ }
+
+ exportAsBase64(): void {
+ this.getViewer()
+ .exportAnnotationsAsBase64String(AnnotationDataFormat.Json)
+ .then((value: string) => {
+ console.log('Exported Base64:', value);
+ });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Common use cases
+- Archive or share annotations as portable JSON/XFDF files
+- Save annotations alongside a document in your storage layer
+- Send annotations to a backend for collaboration or review workflows
+- Export as object for custom serialization and re-import later
+
+## See also
+- [Annotation Overview](../../overview)
+- [Annotation Types](../../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotation/create-modify-annotation)
+- [Customize Annotation](../../annotation/customize-annotation)
+- [Remove Annotation](../../annotation/delete-annotation)
+- [Handwritten Signature](../../annotation/signature-annotation)
+- [Import Annotation](../export-import/import-annotation)
+- [Import Export Events](../export-import/export-import-events)
+- [Annotation Permission](../../annotation/annotation-permission)
+- [Annotation in Mobile View](../../annotation/annotations-in-mobile-view)
+- [Annotation Events](../../annotation/annotation-event)
+- [Annotation API](../../annotation/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/export-import-events.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/export-import-events.md
new file mode 100644
index 0000000000..7f51b3dbb5
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/export-import-events.md
@@ -0,0 +1,143 @@
+---
+layout: post
+title: Import/Export events in Angular PDF Viewer | Syncfusion
+description: Learn how to handle Import/Export events for PDF Annotations in the Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import/Export events in Angular PDF Viewer
+
+Import/export events let developers monitor and control annotation data as it flows into and out of the PDF Viewer. These events enable validation, progress reporting, audit logging, and conditional blocking of import/export operations.
+
+Common use cases:
+- Progress UI and user feedback
+- Validation and sanitization of imported annotation data
+- Audit logging and telemetry
+- Blocking or altering operations based on business rules
+
+Each event exposes typed event-args: `ImportStartEventArgs`, `ImportSuccessEventArgs`, `ImportFailureEventArgs`, `ExportStartEventArgs`, `ExportSuccessEventArgs`, and `ExportFailureEventArgs` that describe the operation context.
+
+## Import events
+- [`importStart`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importstart): Triggers when an import operation starts.
+- [`importSuccess`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importsuccess): Triggers when annotations are successfully imported.
+- [`importFailed`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importfailed): Triggers when importing annotations fails.
+
+## Handle import events
+
+Example: handle import events by wiring event bindings on the Angular PDF Viewer component.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService],
+ template: `
+
+
+ `
+})
+export class AppComponent {
+ 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';
+
+ onImportStart(args: any): void {
+ console.log('Import started', args);
+ }
+
+ onImportSuccess(args: any): void {
+ console.log('Import success', args);
+ }
+
+ onImportFailed(args: any): void {
+ console.error('Import failed', args);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Export events
+- [`exportStart`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportstart): Triggers when an export operation starts.
+- [`exportSuccess`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportsuccess): Triggers when annotations are successfully exported.
+- [`exportFailed`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportfailed): Triggers when exporting annotations fails.
+
+## Handle export events
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService],
+ template: `
+
+
+ `
+})
+export class AppComponent {
+ 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';
+
+ onExportStart(args: any): void {
+ console.log('Export started', args);
+ }
+
+ onExportSuccess(args: any): void {
+ console.log('Export success', args);
+ }
+
+ onExportFailed(args: any): void {
+ console.error('Export failed', args);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> `importStart`, `importSuccess`, and `importFailed` cover the lifecycle of annotation imports; `exportStart`, `exportSuccess`, and `exportFailed` cover the lifecycle of annotation exports.
+
+## See also
+- [Annotation Overview](../../overview)
+- [Annotation Types](../../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export Annotation](../export-import/export-annotation)
+- [Import Annotation](../export-import/import-annotation)
+- [Annotation Permission](../../annotations/annotation-permission)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/import-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/import-annotation.md
new file mode 100644
index 0000000000..d622bab52b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/export-import/import-annotation.md
@@ -0,0 +1,113 @@
+---
+layout: post
+title: Import annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to import annotations in Syncfusion Angular PDF Viewer using UI options and programmatic APIs.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+---
+
+# Import annotations in Angular PDF Viewer
+
+Annotations can be imported into the PDF Viewer using the built-in UI or programmatically.
+The UI accepts JSON and XFDF files from the Comments panel; programmatic import accepts an annotation object previously exported by the viewer.
+
+## Import using the UI (Comments panel)
+
+The Comments panel provides import options in its overflow menu:
+
+- Import annotations from JSON file
+- Import annotations from XFDF file
+
+Steps:
+1. Open the Comments panel in the PDF Viewer.
+2. Click the overflow menu (three dots) at the top of the panel.
+3. Choose the appropriate import option and select the file.
+
+All annotations in the selected file are applied to the current document.
+
+
+
+## Import programmatically (from object)
+
+Import annotations from an object previously exported using `exportAnnotationsAsObject()`.
+Only objects produced by the viewer can be re-imported with the
+[`importAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importannotation)
+API.
+
+Example: export annotations as an object and import them back into the viewer.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService],
+ template: `
+
+
+
+
+
+ `
+})
+export class AppComponent {
+ 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';
+
+ private exportedObject: any = null;
+
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ }
+
+ exportAsObject(): void {
+ this.getViewer().exportAnnotationsAsObject().then((value: any) => {
+ console.log('Exported annotation object:', value);
+ this.exportedObject = value;
+ });
+ }
+
+ importFromObject(): void {
+ if (this.exportedObject) {
+ this.getViewer().importAnnotation(JSON.parse(this.exportedObject));
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> Only objects produced by the viewer (for example, by `exportAnnotationsAsObject()`) are compatible with `importAnnotation`. Persist exported objects in a safe storage location (database or API) and validate them before import.
+
+## Common use cases
+- Restore annotations saved earlier (for example, from a database or API)
+- Apply reviewer annotations shared as JSON/XFDF files via the Comments panel
+- Migrate or merge annotations between documents or sessions
+- Support collaborative workflows by reloading team annotations
+
+## See also
+- [Annotation Overview](../../overview)
+- [Annotation Types](../../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../../annotations/create-modify-annotation)
+- [Customize Annotation](../../annotations/customize-annotation)
+- [Remove Annotation](../../annotations/delete-annotation)
+- [Handwritten Signature](../../annotations/signature-annotation)
+- [Export Annotation](../export-import/export-annotation)
+- [Import Export Events](../export-import/export-import-events)
+- [Annotation Permission](../../annotations/annotation-permission)
+- [Annotation in Mobile View](../../annotations/annotations-in-mobile-view)
+- [Annotation Events](../../annotations/annotation-event)
+- [Annotation API](../../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/flatten-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/flatten-annotation.md
new file mode 100644
index 0000000000..b84c075ef1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/flatten-annotation.md
@@ -0,0 +1,138 @@
+---
+layout: post
+title: Flatten Annotations in the Syncfusion Angular PDF Viewer
+description: Learn how all about how to flatten annotations and formfields before saving a PDF in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten Annotations in Angular PDF Viewer
+
+Flattening takes the visual appearance of annotations and embeds them into each page's content stream. The visual result remains visible, but the annotation objects and interactive form field structures are removed or converted so they can no longer be selected, edited, or filled.
+
+Flattening annotations permanently merges them into the PDF content. Once flattened:
+- Annotations are **no longer editable** in any PDF viewer.
+- Useful for **secure sharing**, preventing modifications.
+- Ideal when **finalizing markup** before distribution.
+
+## How to Flatten Annotations
+
+You can flatten annotations either when a document is loaded (preprocessing) or when exporting/saving the file. Flattening on load makes the viewer display a flattened version immediately; flattening on export preserves the original viewer session while producing a flattened output file.
+
+Typical export-time steps:
+- Save the viewer contents to a Blob.
+- Create a `PdfDocument` from the saved bytes.
+- Enable `document.flatten = true` to merge annotations and form field appearances.
+- Save the resulting PDF.
+
+Use the example below to flatten at export time (on download).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+@Component({
+ selector: 'app-root',
+ template: `
+
+
+
+
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+ ]
+})
+export class AppComponent {
+
+ @ViewChild('pdfViewer')
+ public pdfViewer!: 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';
+
+ public flattenPdf(): void {
+ this.pdfViewer.saveAsBlob().then((value: Blob) => {
+ const reader = new FileReader();
+ reader.onloadend = () => {
+ const arrayBuffer = reader.result as ArrayBuffer;
+ const byteArray = new Uint8Array(arrayBuffer);
+ const document = new PdfDocument(byteArray);
+ // Flatten all annotations and form fields: this embeds appearances
+ // into the page content so annotations are no longer interactive.
+ document.flatten = true;
+ document.save('flattened.pdf');
+ };
+ reader.readAsArrayBuffer(value);
+ });
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To flatten documents when they are uploaded/loaded into the viewer, see [Flatten on Load](../document-handling/preprocess-pdf#flatten-on-load).
+
+
+## Notes
+
+- Flattening applies to **all annotation types**: text markup, shapes, stamps, notes, ink, and form fields.
+- Once flattened, annotations **cannot be edited or removed**.
+- Use flattening **only at export time**, not during regular document interactions.
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
\ No newline at end of file
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 9c058dab7c..8d1c13acad 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,146 +1,144 @@
---
layout: post
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.
+description: Learn how to enable and configure line angle constraints for line-type annotations in the Syncfusion Angular PDF Viewer.
platform: document-processing
-control: Line Angle Constraints
+control: PDF Viewer
documentation: ug
+domainurl: ##DomainURL##
---
# Line angle constraints in Angular PDF Viewer
-The PDF Viewer control provides angle-constraint functionality for line-type annotations. When enabled, drawing operations snap to configured angle increments, improving accuracy and consistency for technical drawings and measurements.
+The PDF Viewer provides line angle constraints functionality that allows drawing line-type annotations with controlled angle snapping. This improves precision for technical drawings and measurements in PDF documents.
+
+
## Enable line angle constraints
-Configure 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:
-
-```html
-
-
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService, TextSelectionService]
})
-
export class AppComponent {
- @ViewChild('pdfviewer')
- public pdfviewerControl: PdfViewerComponent | undefined;
-
- public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public resource:string = "https://cdn.syncfusion.com/ej2/31.1.17/dist/ej2-pdfviewer-lib";
- public annotationDrawingOptions = {
- enableLineAngleConstraints: true,
- restrictLineAngleTo: 90
+
+ 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';
+
+ public annotationDrawingOptions = {
+ enableLineAngleConstraints: true,
+ restrictLineAngleTo: 90
};
- ngOnInit(): void {
- // ngOnInit function
- }
}
-```
-## Configuration Properties
+{% endhighlight %}
+{% endtabs %}
-### enableLineAngleConstraints
-
-The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types snap to fixed angles as defined by `restrictLineAngleTo`:
+## Work with constrained annotations
-- Lines
-- Arrows
-- Polygon
-- Distance measurements
-- Perimeter measurements
-- Area measurements
-- Volume measurements
+### Drawing behavior
-**Key benefits:**
+When line angle constraints are enabled:
-- Automatic angle snapping while drawing
-- Improved precision for technical drawings and measurements
-- Desktop behavior: hold Shift while drawing to toggle constraints (if constraints are disabled, Shift temporarily enables snapping; if enabled, Shift enforces snapping)
-- Real-time visual feedback during drawing
+- 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.
-### restrictLineAngleTo
+### Keyboard shortcuts
-Specifies the angle increment (in degrees) used for snapping. The default increment is 45°.
+- `Shift` + drag: toggles snapping. If constraints are disabled, `Shift` temporarily enables them; if enabled, `Shift` enforces snapping.
-Angle snapping behavior:
+### Selector-based modifications
-- The initial drawing direction is treated as the 0° reference point.
-- Snapped angles are calculated by adding the increment to the reference direction.
-- If the increment does not divide 360 evenly, angles continue wrapping after 360°.
+When modifying existing line annotations using selectors:
-Examples:
+- Constraints apply based on the original line 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.
-- `restrictLineAngleTo: 45` → snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
-- `restrictLineAngleTo: 100` → snapped angles: 0°, 100°, 200°, 300°, 360°
+[View a sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
-## Work with constrained annotations
+## Configuration properties
-### Drawing behavior
+### enableLineAngleConstraints
-When angle constraints are enabled:
+The `enableLineAngleConstraints` property activates angle snapping for line-based annotations. When set to `true`, the following annotation types will snap to fixed angles as defined by the `restrictLineAngleTo` property:
-- Begin drawing a supported annotation (Line, Arrow, Polyline, Distance, or Perimeter).
-- The segment snaps to the nearest allowed angle according to `restrictLineAngleTo`.
-- A visual indicator displays the current snapping angle in real time.
-- Release to finalize the annotation.
+- Lines
+- Arrows
+- Polygon
+- Distance measurements
+- Perimeter measurements
+- Area measurements
+- Volume measurements
-### Keyboard shortcuts
+Key Benefits:
-Desktop platforms:
+- Automatic angle snapping during drawing
+- Enhanced precision for technical drawings and measurements
+- 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
-- `Shift` + drag: toggles snapping during the drag operation. If constraints are disabled, `Shift` temporarily enables snapping; if enabled, `Shift` enforces snapping.
+### restrictLineAngleTo
-### Modifying constrained annotations
+Defines the angle increment (in degrees) used to constrain supported annotations. The default is 45.
-When editing existing line annotations with selectors:
+Angle snapping rules:
-- Constraints apply relative to the annotation's current orientation (the line's direction is the 0° reference).
-- Constraint snapping during modification is supported for Line and Arrow annotations.
-- Adjustments snap according to the configured `restrictLineAngleTo` increment.
+- The initial drawing direction is treated as the 0° reference point.
+- Snapped angles are calculated based on the increment.
+- If the increment does not divide 360 evenly, angles reset after 360°.
-[View a sample in GitHub] https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to
+Examples:
-N> Refer to the Angular PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) for highlights. See additional [Angular PDF Viewer examples](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+- `restrictLineAngleTo: 45` → Snapped angles: 0°, 45°, 90°, 135°, 180°, 225°, 270°, 315°, 360°
+- `restrictLineAngleTo: 100` → Snapped angles: 0°, 100°, 200°, 300°, 360°
+
+N> Refer to the Angular PDF Viewer [feature tour](https://www.syncfusion.com/pdf-viewer-sdk/angular-pdf-viewer) for feature highlights, and to the [Angular PDF Viewer examples](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples) for rendering and configuration examples.
+
+## See also
+
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotations/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotations/create-modify-annotation)
+- [Customize Annotation](../annotations/customize-annotation)
+- [Remove Annotation](../annotations/delete-annotation)
+- [Handwritten Signature](../annotations/signature-annotation)
+- [Export and Import Annotation](../annotations/export-import/export-annotation)
+- [Annotation Permission](../annotations/annotation-permission)
+- [Annotation in Mobile View](../annotations/annotations-in-mobile-view)
+- [Annotation Events](../annotations/annotation-event)
+- [Annotation API](../annotations/annotations-api)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/overview.md
new file mode 100644
index 0000000000..5be550069c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/overview.md
@@ -0,0 +1,51 @@
+---
+layout: post
+title: Overview of Annotation in Angular PDF Viewer | Syncfusion
+description: Learn about Annotations and how to add, edit, delete, and configure Annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotations overview in Angular
+
+Annotations in the PDF Viewer are interactive elements that allow users to add notes, highlights, or text boxes directly to a PDF document. These annotations add context and feedback to PDF files, simplifying collaboration during document reviews.
+
+The PDF Viewer provides a complete set of annotation tools for reviewing, measuring, and marking up PDFs in Angular.
+
+## Supported annotations
+
+- Text markup: [Highlight](../annotation/annotation-types/highlight-annotation), [Underline](../annotation/annotation-types/underline-annotation), [Squiggly](../annotation/annotation-types/Squiggly-annotation), [Strikethrough](../annotation/annotation-types/strikethrough-annotation)
+- Shapes: [Line](../annotation/annotation-types/line-annotation), [Arrow](../annotation/annotation-types/arrow-annotation), [Rectangle](../annotation/annotation-types/rectangle-annotation), [Circle](../annotation/annotation-types/circle-annotation), [Polygon](../annotation/annotation-types/polygon-annotation)
+- Text boxes: [Free Text](../annotation/annotation-types/free-text-annotation)
+- Drawing: [Ink](../annotation/annotation-types/ink-annotation) (freehand)
+- Stamps: [Standard and custom stamps](../annotation/annotation-types/stamp-annotation)
+- Notes: [Sticky Notes](../annotation/annotation-types/sticky-notes-annotation) (comments)
+- Redaction: Mark and apply [redactions](../annotation/annotation-types/redaction-annotation)
+- Measurement: [Distance](../annotation/annotation-types/distance-annotation), [Perimeter](../annotation/annotation-types/perimeter-annotation), [Area](../annotation/annotation-types/area-annotation), [Radius](../annotation/annotation-types/radius-annotation), [Volume](../annotation/annotation-types/volume-annotation)
+
+## Annotation manipulation capabilities
+
+- [Create annotations](../annotation/create-modify-annotation): Use the toolbar, context menu, or APIs to add highlights, notes, shapes, and more directly onto the PDF document.
+- [Edit annotations](../annotation/create-modify-annotation.md): Modify existing annotations by moving, resizing, or updating text and style properties like color, opacity, and thickness.
+- [Customize annotations](../annotation/customize-annotation): Adjust appearance and behavior—such as fonts, fill colors, and opacity—through the UI or configuration options.
+- [Undo and redo annotations](../annotation/annotations-undo-redo): Revert or reapply annotation actions (add, edit, delete) using toolbar buttons or corresponding APIs.
+- [Import and export annotations](../annotation/export-import/export-annotation): Save and load annotations in JSON or XFDF formats to persist markups across sessions or share them with others.
+- Set [Permissions](../annotation/annotation-permission): Enable or disable annotation permission, ensuring compliance with document permissions.
+- Add and manage [comments](../annotation/comments): Insert, edit, and delete comments or sticky notes attached to annotations for clearer feedback and collaboration.
+
+## See also
+
+- [Annotation Types](../annotation/annotation-types)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Remove Annotation](../annotation/delete-annotation)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation Undo Redo](../annotation/annotations-undo-redo)
+- [Annotation API](../annotation/annotations-api)
\ No newline at end of file
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 f6c948d14f..225a6e233f 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/annotation/signature-annotation.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/signature-annotation.md
@@ -12,28 +12,183 @@ domainurl: ##DomainURL##
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
+## Add signature annotation
-Add a handwritten signature using the annotation toolbar.
+### Adding a handwritten signature in UI
-* Open the annotation toolbar by clicking the **Edit Annotation** button on the PDF Viewer toolbar.
-* Select the **HandWritten Signature** button in the annotation toolbar to open the signature panel.
+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 appears.
-* Draw the signature in the panel.
+
-
+- Draw the signature in the panel.
-* Click **Create**, move the signature, and place it at the desired location.
+
-
+- Click **Create**, move the signature, and place it at the desired location.
-## Adding a handwritten signature to the PDF document Programmatically
+
-With the PDF Viewer library, you can programmatically add a handwritten signature to the PDF Viewer control using the [addAnnotation()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/annotation#addannotation) method.
+Refer to the following code sample to switch to the handwritten signature mode programmatically.
-Here is an example of using the `addAnnotation()` method to add a handwritten signature programmatically
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ AnnotationService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService
+ ],
+ template: `
+
+ `
+})
+export class AppComponent {
+
+ public documentPath: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> When `enableHandwrittenSignature` is set to `false`, the handwritten signature toolbar and related UI are disabled; existing handwritten signature annotations remain in the document unless removed. The `canSave` option in annotation examples controls whether a signature can be saved for reuse; when `canSave` is `false`, signatures are not persisted in the signature collection for later reuse.
-Edit the stroke color, border thickness, and opacity of a handwritten signature using the annotation toolbar's edit stroke color, thickness, and opacity tools.
+## See also
-
+- [Annotation Overview](../overview)
+- [Annotation Types](../annotation/annotation-types/area-annotation)
+- [Annotation Toolbar](../toolbar-customization/annotation-toolbar)
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Remove Annotation](../annotation/delete-annotation)
+- [Export and Import Annotation](../annotation/export-import/export-annotation)
+- [Annotation Permission](../annotation/annotation-permission)
+- [Annotation in Mobile View](../annotation/annotations-in-mobile-view)
+- [Annotation Events](../annotation/annotation-event)
+- [Annotation API](../annotation/annotations-api)
\ No newline at end of file