| Query + | ++Is Microsoft.mshtml required when using the OCRProcessor in the .NET Framework? + | +
|---|---|
| Solution | ++Yes, the Microsoft.mshtml component is required when using the OCRProcessor in .NET Framework applications. We internally rely on this package to parse the hOCR results, which are delivered in HTML format. Because of this, Microsoft.mshtml is necessary for .NET Framework projects that use the OCRProcessor. + | +
index), returning rectangles in matchRect.| Issue + | +When you create a PdfTrueTypeFont using only a font family name (e.g., "Arial") in .NET Core or cross‑platform apps, the font can fail to load causing missing text, wrong rendering, or "font not found". + | + +|
|---|---|---|
| Reason + | +In .NET Framework: the PDF library can resolve installed fonts by name (e.g., new Font("Arial", 20) → new PdfTrueTypeFont(font, true) works).
+ +In .NET Core and cross‑platform environments: system font APIs aren't exposed the same way, so PdfTrueTypeFont cannot locate fonts by name you must provide the actual .ttf file (path or stream) to load the font reliably. + |
+|
| Solution + | +
+Load the font directly from a .ttf file using a path or stream, then pass it to PdfTrueTypeFont. This ensures consistent font embedding across all platforms.
+{% tabs %}
+{% highlight C# tabtitle="C#" %}
+
+PdfTrueTypeFont ttf = new PdfTrueTypeFont("Arial.ttf", 20);
+
+{% endhighlight %}
+{% endtabs %}
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
index 6623c7cf52..6a5af0ef87 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/DigitalSignature.md
@@ -32,12 +32,12 @@ let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {
});
// Create a new signature using PFX data and private key
let sign: PdfSignature = PdfSignature.create(
+ certData,
+ password,
{
cryptographicStandard: CryptographicStandard.cms,
digestAlgorithm: DigestAlgorithm.sha256
- },
- certData,
- password
+ }
);
// Set the signature to the field
field.setSignature(sign);
@@ -60,7 +60,7 @@ var form = document.form;
// Create a new signature field
var field = new ej.pdf.PdfSignatureField(page, 'Signature', {x: 10, y: 10, width: 100, height: 50});
// Create a new signature using PFX data and private key
-var sign = ej.pdf.PdfSignature.create({cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256}, certData, password);
+var sign = ej.pdf.PdfSignature.create(certData, password, {cryptographicStandard: ej.pdf.CryptographicStandard.cms, digestAlgorithm: ej.pdf.DigestAlgorithm.sha256});
// Set the signature to the field
field.setSignature(sign);
// Add the field into PDF form
@@ -94,12 +94,12 @@ let field: PdfSignatureField = new PdfSignatureField(page, 'Signature', {
});
// Create a new signature using PFX data and private key
let sign: PdfSignature = PdfSignature.create(
+ certData,
+ password,
{
cryptographicStandard: CryptographicStandard.cms,
digestAlgorithm: DigestAlgorithm.sha256
- },
- certData,
- password
+ }
);
// Set the signature to the field
field.setSignature(sign);
@@ -128,12 +128,12 @@ var field = new ej.pdf.PdfSignatureField(page, 'Signature', {
});
// Create a new signature using PFX data and private key
var sign = ej.pdf.PdfSignature.create(
+ certData,
+ password,
{
cryptographicStandard: ej.pdf.CryptographicStandard.cms,
digestAlgorithm: ej.pdf.DigestAlgorithm.sha256
- },
- certData,
- password
+ }
);
// Set the signature to the field
field.setSignature(sign);
@@ -875,12 +875,12 @@ let externalSignatureCallback = (
};
// Create a new signature using external signing with public certificate collection
let signature: PdfSignature = PdfSignature.create(
+ externalSignatureCallback,
+ publicCertificates,
{
cryptographicStandard: CryptographicStandard.cms,
algorithm: DigestAlgorithm.sha256
- },
- externalSignatureCallback,
- publicCertificates
+ }
);
// Set the signature to the field
field.setSignature(signature);
@@ -921,12 +921,12 @@ var externalSignatureCallback = function (data, options) {
};
// Create a new signature using external signing with public certificate collection
var signature = ej.pdf.PdfSignature.create(
+ externalSignatureCallback,
+ publicCertificates,
{
cryptographicStandard: ej.pdf.CryptographicStandard.cms,
algorithm: ej.pdf.DigestAlgorithm.sha256
- },
- externalSignatureCallback,
- publicCertificates
+ }
);
// Set the signature to the field
field.setSignature(signature);
diff --git a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md
index ca588d9804..78c1209f64 100644
--- a/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md
+++ b/Document-Processing/PDF/PDF-Library/javascript/Split-Documents.md
@@ -26,7 +26,7 @@ document.splitEvent = documentSplitEvent;
document.split();
// Event to invoke while splitting PDF document data
function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs): void {
- Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
+ Save.save('output_' + args.index + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
}
// Destroy the document
document.destroy();
@@ -41,7 +41,7 @@ document.splitEvent = documentSplitEvent;
document.split();
// Event to invoke while splitting PDF document data
function documentSplitEvent(sender, args): void {
- Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
+ Save.save('output_' + args.index + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
}
// Destroy the document
document.destroy();
@@ -65,7 +65,7 @@ document.splitEvent = documentSplitEvent;
document.splitByPageRanges([[0, 4], [5, 9]]);
// Event to invoke while splitting PDF document data
function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs): void {
- Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
+ Save.save('output_' + args.index + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
}
// Destroy the document
document.destroy();
@@ -80,7 +80,7 @@ document.splitEvent = documentSplitEvent;
document.splitByPageRanges([[0, 4], [5, 9]]);
// Event to invoke while splitting PDF document data
function documentSplitEvent(sender, args): void {
- Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
+ Save.save('output_' + args.index + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
}
// Destroy the document
document.destroy();
@@ -104,7 +104,7 @@ document.splitEvent = documentSplitEvent;
document.splitByFixedNumber(1);
// Event to invoke while splitting PDF document data
function documentSplitEvent(sender: PdfDocument, args: PdfDocumentSplitEventArgs): void {
- Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
+ Save.save('output_' + args.index + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
}
// Destroy the document
document.destroy();
@@ -119,7 +119,7 @@ document.splitEvent = documentSplitEvent;
document.splitByFixedNumber(1);
// Event to invoke while splitting PDF document data
function documentSplitEvent(sender, args): void {
- Save.save('output_' + args.splitIndex + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
+ Save.save('output_' + args.index + '.pdf', new Blob([args.pdfData], { type: 'application/pdf' }));
}
// Destroy the document
document.destroy();
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Localization/default-language.md b/Document-Processing/PDF/PDF-Viewer/angular/Localization/default-language.md
new file mode 100644
index 0000000000..844f93eeba
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Localization/default-language.md
@@ -0,0 +1,345 @@
+---
+layout: post
+title: Localization in Angular PDF Viewer | Syncfusion
+description: Learn here all about the default language culture and localization in Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Localization in the Angular PDF Viewer
+
+The PDF Viewer supports localization of UI text, tooltips, and messages using culture-specific string collections so the interface matches users' language and regional settings.
+
+
+
+N> Change the viewer locale by setting the `locale` property on the Angular component or by loading translations with `L10n.load` from `@syncfusion/ej2-base`.
+
+## Default language (en-US)
+
+By default, the PDF Viewer uses the `en-US` culture and requires no additional configuration.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService
+ ],
+ 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 %}
+
+## Localization keys reference
+
+The PDF Viewer supports localization using culture-specific string collections. By default, the component uses the "en-US" culture.
+
+The following table lists the default text values used by the PDF Viewer in the "en-US" culture:
+
+|Keywords|Values|
+|---|---|
+|PdfViewer|PDF Viewer|
+|Cancel|Cancel|
+|Download file|Download file|
+|Download|Download|
+|Enter Password|This document is password protected. Please enter a password.|
+|File Corrupted|File corrupted|
+|File Corrupted Content|The file is corrupted and cannot be opened.|
+|Fit Page|Fit page|
+|Fit Width|Fit width|
+|Automatic|Automatic|
+|Go To First Page|Show first page|
+|Invalid Password|Incorrect password. Please try again.|
+|Next Page|Show next page|
+|OK|OK|
+|Open|Open file|
+|Page Number|Current page number|
+|Previous Page|Show previous page|
+|Go To Last Page|Show last page|
+|Zoom|Zoom|
+|Zoom In|Zoom in|
+|Zoom Out|Zoom out|
+|Page Thumbnails|Page thumbnails|
+|Bookmarks|Bookmarks|
+|Print|Print file|
+|Password Protected|Password required|
+|Copy|Copy|
+|Text Selection|Text selection tool|
+|Panning|Pan mode|
+|Text Search|Find text|
+|Find in document|Find in document|
+|Match case|Match case|
+|Apply|Apply|
+|GoToPage|Go to page|
+|No Matches|Viewer has finished searching the document. No more matches were found|
+|No Text Found|No Text Found|
+|Undo|Undo|
+|Redo|Redo|
+|Annotation|Add or Edit annotations|
+|Highlight|Highlight Text|
+|Underline|Underline Text|
+|Strikethrough|Strikethrough Text|
+|Delete|Delete annotation|
+|Opacity|Opacity|
+|Color edit|Change Color|
+|Opacity edit|Change Opacity|
+|Highlight context|Highlight|
+|Underline context|Underline|
+|Strikethrough context|Strike through|
+|Server error|Web-service is not listening. PDF Viewer depends on web-service for all it's features. Please start the web service to continue.|
+|Open text|Open|
+|First text|First Page|
+|Previous text|Previous Page|
+|Next text|Next Page|
+|Last text|Last Page|
+|Zoom in text|Zoom In|
+|Zoom out text|Zoom Out|
+|Selection text|Selection|
+|Pan text|Pan|
+|Print text|Print|
+|Search text|Search|
+|Annotation Edit text|Edit Annotation|
+|Line Thickness|Line Thickness|
+|Line Properties|Line Properties|
+|Start Arrow|Start Arrow |
+|End Arrow|End Arrow|
+|Line Style|Line Style|
+|Fill Color|Fill Color|
+|Line Color|Line Color|
+|None|None|
+|Open Arrow|Open Arrow|
+|Closed Arrow|Closed Arrow|
+|Round Arrow|Round Arrow|
+|Square Arrow|Square Arrow|
+|Diamond Arrow|Diamond Arrow|
+|Cut|Cut|
+|Paste|Paste|
+|Delete Context|Delete Context|
+|Properties|Properties|
+|Add Stamp|Add Stamp|
+|Add Shapes|Add Shapes|
+|Stroke edit|Stroke Edit|
+|Change thickness|Change Thickness|
+|Add line|Add Line|
+|Add arrow|Add Arrow|
+|Add rectangle|Add Rectangle|
+|Add circle|Add Circle|
+|Add polygon|Add Polygon|
+|Add Comments|Add Comments|
+|Comments| Comments|
+|No Comments Yet|No Comments Yet|
+|Accepted| Accepted|
+|Completed| Completed|
+|Cancelled| Cancelled|
+|Rejected| Rejected|
+|Leader Length|Leader Length|
+|Scale Ratio|Scale Ratio|
+|Calibrate| Calibrate|
+|Calibrate Distance|Calibrate Distance|
+|Calibrate Perimeter|Calibrate Perimeter|
+|Calibrate Area|Calibrate Area|
+|Calibrate Radius|Calibrate Radius|
+|Calibrate Volume|Calibrate Volume|
+|Depth|Depth|
+|Closed|Closed|
+|Round|Round|
+|Square|Square|
+|Diamond|Diamond|
+|Edit|Edit|
+|Comment|Comment|
+|Comment Panel|Comment Panel|
+|Set Status|Set Status|
+|Post|Post|
+|Page|Page|
+|Add a comment|Add a comment|
+|Add a reply|Add a reply|
+|Import Annotations|Import Annotations|
+|Export Annotations|Export Annotations|
+|Add|Add|
+|Clear|Clear|
+|Bold|Bold|
+|Italic|Italic|
+|Strikethroughs|Strikethroughs|
+|Underlines|Underlines|
+|Superscript|Superscript|
+|Subscript|Subscript|
+|Align left|Align Left|
+|Align right|Align Right|
+|Center|Center|
+|Justify|Justify|
+|Font color|Font Color|
+|Text Align|Text Align|
+|Text Properties|Text Properties|
+|Draw Signature|Draw Signature|
+|Create| Create|
+|Font family|Font Family|
+|Font size|Font Size|
+|Free Text|Free Text|
+|Import Failed|Import Failed|
+|File not found|File Not Found|
+|Export Failed|Export Failed|
+|Dynamic|Dynamic|
+|Standard Business|Standard Business|
+|Sign Here|Sign Here|
+|Custom Stamp|Custom Stamp|
+|InitialFieldDialogHeaderText|Initial Field Dialog Header Text|
+|HandwrittenInitialDialogHeaderText|Handwritten Initial Dialog Header Text|
+|SignatureFieldDialogHeaderText|Signature Field Dialog Header Text|
+|HandwrittenSignatureDialogHeaderText|Handwritten Signature Dialog Header Text|
+|Draw-hand Signature|Draw-hand Signature|
+|Type Signature|Type Signature|
+|Upload Signature|Upload Signature|
+|Browse Signature Image|Browse Signature Image|
+|Save Signature|Save Signature|
+|Save Initial|Save Initial|
+|highlight|highlight|
+|underline|underline|
+|strikethrough|strikethrough|
+|FormDesigner|Form Designer|
+|SubmitForm|Submit Form|
+|Search text|Search Text|
+|Draw Ink|Draw Ink|
+|Revised|Revised|
+|Reviewed|Reviewed|
+|Received|Received|
+|Confidential|Confidential|
+|Approved|Approved|
+|Not Approved|Not Approved|
+|Witness|Witness|
+|Initial Here|Initial Here|
+|Draft|Draft|
+|Final|Final|
+|For Public Release|For Public Release|
+|Not For Public Release|Not For Public Release|
+|For Comment|For Comment|
+|Void|Void|
+|Preliminary Results|Preliminary Results|
+|Information Only|Information Only|
+|Enter Signature as Name|Enter Signature as Name|
+|Textbox|Textbox|
+|Password|Password|
+|Check Box|Check Box|
+|Radio Button|Radio Button|
+|Dropdown|Dropdown|
+|List Box|List Box|
+|Signature|Signature|
+|Delete FormField|Delete FormField|
+|FormDesigner Edit text|Form Designer Edit Text|
+|in|in|
+|m|m|
+|ft_in|ft_in|
+|ft|ft|
+|p|p|
+|cm|cm|
+|mm|mm|
+|pt|pt|
+|cu|cu|
+|sq|sq|
+|General|General|
+|Appearance|Appearance|
+|Options|Options|
+|Textbox Properties|Textbox Properties|
+|Name|Name|
+|Tooltip|Tooltip|
+|Value|Value|
+|Form Field Visibility|Form Field Visibility|
+|Read Only|Read Only|
+|Required|Required|
+|Checked|Checked|
+|Show Printing|Show Printing|
+|Formatting|Formatting|
+|Fill|Fill|
+|Border|Border|
+|Border Color|Border Color|
+|Thickness|Thickness|
+|Max Length|Max Length|
+|List Item|List Item|
+|Export Value|Export Value|
+|Dropdown Item List|Dropdown Item List|
+|List Box Item List|List Box Item List|
+|Delete Item|Delete Item|
+|Up|Up|
+|Down|Down|
+|Multiline|Multiline|
+|Initial|Initial|
+|Export XFDF|Export XFDF|
+|Import XFDF|Import XFDF|
+|Organize Pages|Organize Pages|
+|Insert Right|Insert Right|
+|Insert Left|Insert Left|
+|Total|Total|
+|Pages|Pages|
+|Rotate Right|Rotate Right|
+|Rotate Left|Rotate Left|
+|Delete Page|Delete Page|
+|Delete Pages|Delete Pages|
+|Copy Page|Copy Page|
+|Copy Pages|Copy Pages|
+|Save|Save|
+|Save As|Save As|
+|Select All|Select All|
+|Import Document|Import Document|
+|Match any word|Match any word|
+|Client error|Client-side error is found. Please check the custom headers provided in the AjaxRequestSettings property and web action methods in the ServerActionSettings property|
+|Cors policy error|Unable to retrieve the document due to an invalid URL or access restrictions. Please check the document URL and try again|
+|No More Matches|Viewer has finished searching the document. No more matches were found|
+|No Search Matches|No matches found|
+|No More Search Matches|No more matches found|
+|Exact Matches|EXACT MATCHES|
+|Total Matches|TOTAL MATCHES|
+
+## See Also
+
+- [New Language](./new-language)
+- [RTL Language Support](./rtl-language-support)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Localization/new-language.md b/Document-Processing/PDF/PDF-Viewer/angular/Localization/new-language.md
new file mode 100644
index 0000000000..0d1351f04d
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Localization/new-language.md
@@ -0,0 +1,372 @@
+---
+layout: post
+title: Set a New Language in Angular PDF Viewer | Syncfusion
+description: Learn how to localize the Syncfusion Angular PDF Viewer with culture codes using L10n.load and the locale property.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Set a new language in the Angular PDF Viewer
+
+Use the Angular PDF Viewer's [locale](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#locale) property together with `L10n.load` to display UI text, tooltips, and messages in your users' language. Provide only the keys you need to override; missing keys fall back to the default `en-US` values.
+
+
+
+## When to use this
+- You need the viewer UI (e.g., toolbar text, dialogs, tooltips) to appear in a specific language.
+- You want to override a few labels (e.g., “Open”, “Zoom”, “Print”) without redefining every string.
+
+## Prerequisites
+- `@syncfusion/ej2-angular-pdfviewer` installed in an Angular app.
+- (Optional) A list of keys you want to override.
+
+## Quick start (set German)
+1. **Load translations** with `L10n.load` at app start (only include the keys you want to change).
+2. **Set the culture** by passing `locale` value to the PDF Viewer component.
+3. **Render the viewer** as usual. Missing keys will automatically fall back to `en-US`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { L10n } from '@syncfusion/ej2-base';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+/** 1) Provide only the keys you want to override; others fall back to en-US */
+L10n.load({
+ 'de': {
+ 'PdfViewer': {
+ 'PdfViewer': 'PDF-Viewer',
+ 'Cancel': 'Abbrechen',
+ 'Download file': 'Datei herunterladen',
+ 'Download': 'Herunterladen',
+ 'Enter Password': 'Dieses Dokument ist passwortgeschützt. Bitte geben Sie ein Passwort ein.',
+ 'File Corrupted': 'Datei beschädigt',
+ 'File Corrupted Content': 'Die Datei ist beschädigt und kann nicht geöffnet werden.',
+ 'Fit Page': 'Seite anpassen',
+ 'Fit Width': 'Breite anpassen',
+ 'Automatic': 'Automatisch',
+ 'Go To First Page': 'Erste Seite anzeigen',
+ 'Invalid Password': 'Falsches Passwort. Bitte versuchen Sie es erneut.',
+ 'Next Page': 'Nächste Seite anzeigen',
+ 'OK': 'OK',
+ 'Open': 'Datei öffnen',
+ 'Page Number': 'Aktuelle Seitenzahl',
+ 'Previous Page': 'Vorherige Seite anzeigen',
+ 'Go To Last Page': 'Letzte Seite anzeigen',
+ 'Zoom': 'Zoomen',
+ 'Zoom In': 'Hineinzoomen',
+ 'Zoom Out': 'Herauszoomen',
+ 'Page Thumbnails': 'Miniaturansichten der Seiten',
+ 'Bookmarks': 'Lesezeichen',
+ 'Print': 'Druckdatei',
+ 'Organize Pages': 'Seiten organisieren',
+ 'Insert Right': 'Rechts einfügen',
+ 'Insert Left': 'Links einfügen',
+ 'Total': 'Gesamt',
+ 'Pages': 'Seiten',
+ 'Rotate Right': 'Drehe nach rechts',
+ 'Rotate Left': 'Nach links drehen',
+ 'Delete Page': 'Seite löschen',
+ 'Delete Pages': 'Seiten löschen',
+ 'Copy Page': 'Seite kopieren',
+ 'Copy Pages': 'Seiten kopieren',
+ 'Import Document': 'Dokument importieren',
+ 'Save': 'Speichern',
+ 'Save As': 'Speichern als',
+ 'Select All': 'Wählen Sie Alle',
+ 'Change Page Zoom': 'Change Page Zoom',
+ 'Increase Page Zoom': 'Increase Page Zoom',
+ 'Decrease Page Zoom': 'Decrease Page Zoom',
+ 'Password Protected': 'Passwort erforderlich',
+ 'Copy': 'Kopieren',
+ 'Text Selection': 'Textauswahltool',
+ 'Panning': 'Schwenkmodus',
+ 'Text Search': 'Text finden',
+ 'Find in document': 'Im Dokument suchen',
+ 'Match case': 'Gross- / Kleinschreibung',
+ 'Match any word': 'Passen Sie ein beliebiges Wort an',
+ 'Apply': 'Anwenden',
+ 'GoToPage': 'Gehen Sie zur Seite',
+ 'No Matches': 'PDF Viewer hat die Suche im Dokument abgeschlossen. Es wurden keine Übereinstimmungen gefunden.',
+ 'No More Matches': 'PDF Viewer hat die Suche im Dokument abgeschlossen. Es wurden keine weiteren Übereinstimmungen gefunden.',
+ 'No Search Matches': 'Keine Treffer gefunden',
+ 'No More Search Matches': 'Keine weiteren Übereinstimmungen gefunden',
+ 'Exact Matches': 'Genaue Übereinstimmungen',
+ 'Total Matches': 'Gesamtspiele',
+ 'Undo': 'Rückgängig machen',
+ 'Redo': 'Wiederholen',
+ 'Annotation': 'Anmerkungen hinzufügen oder bearbeiten',
+ 'FormDesigner': 'Fügen Sie Formularfelder hinzu und bearbeiten Sie sie',
+ 'Highlight': 'Text hervorheben',
+ 'Underline': 'Text unterstreichen',
+ 'Strikethrough': 'Durchgestrichener Text',
+ 'Squiggly': 'Squiggly Text',
+ 'Delete': 'Anmerkung löschen',
+ 'Opacity': 'Opazität',
+ 'Color edit': 'Farbe ändern',
+ 'Opacity edit': 'Deckkraft ändern',
+ 'Highlight context': 'Markieren',
+ 'Underline context': 'Unterstreichen',
+ 'Strikethrough context': 'Durchschlagen',
+ 'Squiggly context': 'Squiggly',
+ 'Server error': 'Der Webdienst hört nicht zu. ',
+ 'Client error': 'Der Client-Seiten-Fehler wird gefunden. Bitte überprüfen Sie die benutzerdefinierten Header in der Eigenschaft von AjaxRequestSets und Web -Aktion in der Eigenschaftsassettierungseigenschaft.',
+ 'Cors policy error': 'Das Dokument kann aufgrund einer ungültigen URL- oder Zugriffsbeschränkungen nicht abgerufen werden. Bitte überprüfen Sie die Dokument -URL und versuchen Sie es erneut.',
+ 'Open text': 'Offen',
+ 'First text': 'Erste Seite',
+ 'Previous text': 'Vorherige Seite',
+ 'Next text': 'Nächste Seite',
+ 'Last text': 'Letzte Seite',
+ 'Zoom in text': 'Hineinzoomen',
+ 'Zoom out text': 'Rauszoomen',
+ 'Selection text': 'Auswahl',
+ 'Pan text': 'Pfanne',
+ 'Print text': 'Drucken',
+ 'Search text': 'Suchen',
+ 'Annotation Edit text': 'Anmerkung bearbeiten',
+ 'FormDesigner Edit text': 'Fügen Sie Formularfelder hinzu und bearbeiten Sie sie',
+ 'Line Thickness': 'Dicke der Linie',
+ 'Line Properties': 'Linieneigenschaften',
+ 'Start Arrow': 'Pfeil starten',
+ 'End Arrow': 'Endpfeil',
+ 'Line Style': 'Linienstil',
+ 'Fill Color': 'Füllfarbe',
+ 'Line Color': 'Linienfarbe',
+ 'None': 'Keiner',
+ 'Open Arrow': 'Offen',
+ 'Closed Arrow': 'Geschlossen',
+ 'Round Arrow': 'Runden',
+ 'Square Arrow': 'Quadrat',
+ 'Diamond Arrow': 'Diamant',
+ 'Butt': 'Hintern',
+ 'Cut': 'Schneiden',
+ 'Paste': 'Paste',
+ 'Delete Context': 'Löschen',
+ 'Properties': 'Eigenschaften',
+ 'Add Stamp': 'Stempel hinzufügen',
+ 'Add Shapes': 'Formen hinzufügen',
+ 'Stroke edit': 'Ändern Sie die Strichfarbe',
+ 'Change thickness': 'Randstärke ändern',
+ 'Add line': 'Zeile hinzufügen',
+ 'Add arrow': 'Pfeil hinzufügen',
+ 'Add rectangle': 'Rechteck hinzufügen',
+ 'Add circle': 'Kreis hinzufügen',
+ 'Add polygon': 'Polygon hinzufügen',
+ 'Add Comments': 'Füge Kommentare hinzu',
+ 'Comments': 'Kommentare',
+ 'SubmitForm': 'Formular abschicken',
+ 'No Comments Yet': 'Noch keine Kommentare',
+ 'Accepted': 'Akzeptiert',
+ 'Completed': 'Vollendet',
+ 'Cancelled': 'Abgesagt',
+ 'Rejected': 'Abgelehnt',
+ 'Leader Length': 'Führungslänge',
+ 'Scale Ratio': 'Skalenverhältnis',
+ 'Calibrate': 'Kalibrieren',
+ 'Calibrate Distance': 'Distanz kalibrieren',
+ 'Calibrate Perimeter': 'Umfang kalibrieren',
+ 'Calibrate Area': 'Bereich kalibrieren',
+ 'Calibrate Radius': 'Radius kalibrieren',
+ 'Calibrate Volume': 'Lautstärke kalibrieren',
+ 'Depth': 'Tiefe',
+ 'Closed': 'Geschlossen',
+ 'Round': 'Runden',
+ 'Square': 'Quadrat',
+ 'Diamond': 'Diamant',
+ 'Edit': 'Bearbeiten',
+ 'Comment': 'Kommentar',
+ 'Comment Panel': 'Kommentarpanel',
+ 'Set Status': 'Status festlegen',
+ 'Post': 'Post',
+ 'Page': 'Seite',
+ 'Add a comment': 'Einen Kommentar hinzufügen',
+ 'Add a reply': 'Fügen Sie eine Antwort hinzu',
+ 'Import Annotations': 'Importieren Sie Annotationen aus der JSON -Datei',
+ 'Export Annotations': 'Annotation an die JSON -Datei exportieren',
+ 'Export XFDF': 'Annotation in XFDF -Datei exportieren',
+ 'Import XFDF': 'Importieren Sie Annotationen aus der XFDF -Datei',
+ 'Add': 'Hinzufügen',
+ 'Clear': 'Klar',
+ 'Bold': 'Deutlich',
+ 'Italic': 'Kursiv',
+ 'Strikethroughs': 'Durchgestrichen',
+ 'Underlines': 'Unterstreichen',
+ 'Superscript': 'Hochgestellt',
+ 'Subscript': 'Index',
+ 'Align left': 'Linksbündig',
+ 'Align right': 'Rechts ausrichten',
+ 'Center': 'Center',
+ 'Justify': 'Rechtfertigen',
+ 'Font color': 'Schriftfarbe',
+ 'Text Align': 'Textausrichtung',
+ 'Text Properties': 'Schriftstil',
+ 'SignatureFieldDialogHeaderText': 'Signatur hinzufügen',
+ 'HandwrittenSignatureDialogHeaderText': 'Signatur hinzufügen',
+ 'InitialFieldDialogHeaderText': 'Initial hinzufügen',
+ 'HandwrittenInitialDialogHeaderText': 'Initial hinzufügen',
+ 'Draw Ink': 'Tinte zeichnen',
+ 'Create': 'Erstellen',
+ 'Font family': 'Schriftfamilie',
+ 'Font size': 'Schriftgröße',
+ 'Free Text': 'Freier Text',
+ 'Import Failed': 'Ungültiger JSON -Dateityp oder Dateiname; Bitte wählen Sie eine gültige JSON -Datei aus',
+ 'Import PDF Failed': 'Ungültige PDF -Dateityp oder PDF -Datei nicht gefunden. Bitte wählen Sie eine gültige PDF -Datei aus',
+ 'File not found': 'Die importierte JSON -Datei wird nicht am gewünschten Ort gefunden',
+ 'Export Failed': 'Exportanmerkungen sind gescheitert. Bitte stellen Sie sicher, dass Anmerkungen ordnungsgemäß hinzugefügt werden',
+ 'of': 'von ',
+ 'Dynamic': 'Dynamisch',
+ 'Standard Business': 'Standardgeschäft',
+ 'Sign Here': 'Hier unterschreiben',
+ 'Custom Stamp': 'Benutzerdefinierte Stempel',
+ 'Enter Signature as Name': 'Gib deinen Namen ein',
+ 'Draw-hand Signature': 'ZIEHEN',
+ 'Type Signature': 'TYP',
+ 'Upload Signature': 'HOCHLADEN',
+ 'Browse Signature Image': 'DURCHSUCHE',
+ 'Save Signature': 'Signatur speichern',
+ 'Save Initial': 'Initial speichern',
+ 'Textbox': 'Textfeld',
+ 'Password': 'Passwort',
+ 'Check Box': 'Kontrollkästchen',
+ 'Radio Button': 'Radio knopf',
+ 'Dropdown': 'Runterfallen',
+ 'List Box': 'Listenfeld',
+ 'Signature': 'Unterschrift',
+ 'Delete FormField': 'Formular löschen',
+ 'Textbox Properties': 'Textbox -Eigenschaften',
+ 'Name': 'Name',
+ 'Tooltip': 'Tooltip',
+ 'Value': 'Wert',
+ 'Form Field Visibility': 'Sichtbarkeit von Feldwäschen',
+ 'Read Only': 'Schreibgeschützt',
+ 'Required': 'Erforderlich',
+ 'Checked': 'Geprüft',
+ 'Show Printing': 'Drucken zeigen',
+ 'Formatting': 'Format',
+ 'Fill': 'Füllen',
+ 'Border': 'Grenze',
+ 'Border Color': 'Randfarbe',
+ 'Thickness': 'Dicke',
+ 'Max Length': 'Maximale Länge',
+ 'List Item': 'Artikelname',
+ 'Export Value': 'Gegenstandswert',
+ 'Dropdown Item List': 'Dropdown -Elementliste',
+ 'List Box Item List': 'Listenfeldelementliste',
+ 'General': 'ALLGEMEIN',
+ 'Appearance': 'AUSSEHEN',
+ 'Options': 'OPTIONEN',
+ 'Delete Item': 'Löschen',
+ 'Up': 'Hoch',
+ 'Down': 'Runter',
+ 'Multiline': 'Multiline',
+ 'Revised': 'Überarbeitet',
+ 'Reviewed': 'Bewertet',
+ 'Received': 'Erhalten',
+ 'Confidential': 'Vertraulich',
+ 'Approved': 'Genehmigt',
+ 'Not Approved': 'Nicht bestätigt',
+ 'Witness': 'Zeuge',
+ 'Initial Here': 'Anfang hier',
+ 'Draft': 'Entwurf',
+ 'Final': 'Finale',
+ 'For Public Release': 'Für die Veröffentlichung',
+ 'Not For Public Release': 'Nicht für die Veröffentlichung',
+ 'For Comment': 'Für Kommentar',
+ 'Void': 'Leere',
+ 'Preliminary Results': 'Vorläufige Ergebnisse',
+ 'Information Only': 'Nur Informationen',
+ 'in': 'In',
+ 'm': 'M',
+ 'ft_in': 'ft_in',
+ 'ft': 'ft',
+ 'p': 'P',
+ 'cm': 'cm',
+ 'mm': 'mm',
+ 'pt': 'pt',
+ 'cu': 'cu',
+ 'sq': 'Quadrat',
+ 'Initial': 'Initiale',
+ 'Extract Pages': 'Extract Pages',
+ 'Delete Pages After Extracting': 'Delete Pages After Extracting',
+ 'Extract Pages As Separate Files': 'Extract Pages As Separate Files',
+ 'Extract': 'Extract',
+ 'Example: 1,3,5-12': 'Example: 1,3,5-12',
+ 'No matches': 'Der Viewer hat die Suche im Dokument abgeschlossen. ',
+ 'No Text Found': 'Kein Text gefunden'
+ }
+ }
+});
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ 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 %}
+
+## How it works
+- [locale](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#locale) sets the culture used by the viewer for all strings.
+- `L10n.load({...})` registers your culture-specific string overrides at runtime.
+- Missing keys fall back to `en-US`.
+
+## Troubleshooting
+- **Overrides not applied?** Ensure the culture code matches in both `locale` and `L10n.load`.
+- **Some labels still English?** Add those keys to your `L10n.load` object.
+- **Resource loading issues?** Verify your `resourceUrl` property is correctly configured.
+
+## See also
+- [Default Language](./default-language)
+- [RTL Language Support](./rtl-language-support)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Localization/rtl-language-support.md b/Document-Processing/PDF/PDF-Viewer/angular/Localization/rtl-language-support.md
new file mode 100644
index 0000000000..b16fb3d421
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Localization/rtl-language-support.md
@@ -0,0 +1,352 @@
+---
+layout: post
+title: RTL Localization in Angular PDF Viewer | Syncfusion
+description: Learn about the Localization and Right to Left Lanugage Support in Syncfusion Angular PDF Viewer component.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# RTL and Localization Page in Angular PDF Viewer
+
+Use RTL support to render the viewer interface for right-to-left languages.
+- Enable [enableRtl](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enablertl) to apply right-to-left layout.
+- Load culture-specific strings globally with `L10n.load`.
+- Set the [locale](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#locale) property on the PDF Viewer component to the target culture.
+
+
+
+## Example: enable RTL and provide Arabic localization
+
+Use the example below to enable RTL for languages such as Arabic, Hebrew, and Persian.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import { L10n } from '@syncfusion/ej2-base';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+/** Load culture files here */
+L10n.load({
+ 'ar-AE': {
+ 'PdfViewer': {
+ 'PdfViewer': 'قوات الدفاع الشعبي المشاهد',
+ 'Cancel': 'إلغاء',
+ 'Download file': 'تحميل الملف',
+ 'Download': 'تحميل',
+ 'Enter Password': 'هذا المستند محمي بكلمة مرور. يرجى إدخال كلمة مرور.',
+ 'File Corrupted': 'ملف تالف',
+ 'File Corrupted Content': 'الملف تالف ولا يمكن فتحه.',
+ 'Fit Page': 'لائق بدنيا الصفحة',
+ 'Fit Width': 'لائق بدنيا عرض',
+ 'Automatic': 'تلقائي',
+ 'Go To First Page': 'عرض الصفحة الأولى',
+ 'Invalid Password': 'كلمة سر خاطئة. حاول مرة اخرى.',
+ 'Next Page': 'عرض الصفحة التالية',
+ 'OK': 'حسنا',
+ 'Open': 'فتح الملف',
+ 'Page Number': 'رقم الصفحة الحالية',
+ 'Previous Page': 'عرض الصفحة السابقة',
+ 'Go To Last Page': 'عرض الصفحة الأخيرة',
+ 'Zoom': 'تكبير',
+ 'Zoom In': 'تكبير في',
+ 'Zoom Out': 'تكبير خارج',
+ 'Page Thumbnails': 'مصغرات الصفحة',
+ 'Bookmarks': 'المرجعية',
+ 'Print': 'اطبع الملف',
+ 'Password Protected': 'كلمة المرور مطلوبة',
+ 'Copy': 'نسخ',
+ 'Text Selection': 'أداة اختيار النص',
+ 'Panning': 'وضع عموم',
+ 'Text Search': 'بحث عن نص',
+ 'Find in document': 'ابحث في المستند',
+ 'Match case': 'حالة مباراة',
+ 'Apply': 'تطبيق',
+ 'GoToPage': 'انتقل إلى صفحة',
+ 'No Matches': 'انتهى العارض من البحث في المستند. لم يتم العثور على مزيد من التطابقات',
+ 'No Text Found': 'لم يتم العثور على نص',
+ 'Undo': 'فك',
+ 'Redo': 'فعل ثانية',
+ 'Annotation': 'إضافة أو تعديل التعليقات التوضيحية',
+ 'Highlight': 'تسليط الضوء على النص',
+ 'Underline': 'تسطير النص',
+ 'Strikethrough': 'نص يتوسطه خط',
+ 'Delete': 'حذف التعليق التوضيحي',
+ 'Opacity': 'غموض',
+ 'Color edit': 'غير اللون',
+ 'Opacity edit': 'تغيير التعتيم',
+ 'highlight': 'تسليط الضوء',
+ 'underline': 'أكد',
+ 'strikethrough': 'يتوسطه',
+ // tslint:disable-next-line:max-line-length
+ 'Server error': 'خدمة الانترنت لا يستمع. يعتمد قوات الدفاع الشعبي المشاهد على خدمة الويب لجميع ميزاته. يرجى بدء خدمة الويب للمتابعة.',
+ 'Open text': 'افتح',
+ 'First text': 'الصفحة الأولى',
+ 'Previous text': 'الصفحة السابقة',
+ 'Next text': 'الصفحة التالية',
+ 'Last text': 'آخر صفحة',
+ 'Zoom in text': 'تكبير',
+ 'Zoom out text': 'تصغير',
+ 'Selection text': 'اختيار',
+ 'Pan text': 'مقلاة',
+ 'Print text': 'طباعة',
+ 'Search text': 'بحث',
+ 'Annotation Edit text': 'تحرير التعليق التوضيحي',
+ 'Line Thickness': 'سمك الخط',
+ 'Line Properties': 'خط الخصائص',
+ 'Start Arrow': 'ابدأ السهم',
+ 'End Arrow': 'نهاية السهم',
+ 'Line Style': 'أسلوب الخط',
+ 'Fill Color': 'ملء اللون',
+ 'Line Color': ' الخط اللون',
+ 'None': 'لا شيء',
+ 'Open Arrow': 'افتح',
+ 'Closed Arrow': 'مغلق',
+ 'Round Arrow': 'مستدير',
+ 'Square Arrow': 'مربع',
+ 'Diamond Arrow': 'الماس',
+ 'Cut': 'يقطع',
+ 'Paste': 'معجون',
+ 'Delete Context': 'حذف',
+ 'Properties': 'الخصائص',
+ 'Add Stamp': 'إضافة الطوابع',
+ 'Add Shapes': 'أضف الأشكال',
+ 'Stroke edit': 'تغيير لون السكتة الدماغية',
+ 'Change thickness': 'تغيير سمك الحدود',
+ 'Add line': 'إضافة خط',
+ 'Add arrow': 'سهم إضافة',
+ 'Add rectangle': 'أضف مستطيل',
+ 'Add circle': 'إضافة دائرة',
+ 'Add polygon': 'أضف مضلع',
+ 'Add Comments': 'أضف تعليقات',
+ 'Comments': 'تعليقات',
+ 'No Comments Yet': 'لا توجد تعليقات حتى الآن',
+ 'Accepted': 'وافقت',
+ 'Completed': 'منجز',
+ 'Cancelled': 'ألغيت',
+ 'Rejected': 'مرفوض',
+ 'Leader Length': 'زعيم الطول',
+ 'Scale Ratio': 'نسبة مقياس',
+ 'Calibrate': 'عاير',
+ 'Calibrate Distance': 'معايرة المسافة',
+ 'Calibrate Perimeter': 'معايرة محيط',
+ 'Calibrate Area': 'عاير منطقة',
+ 'Calibrate Radius': 'معايرة نصف القطر',
+ 'Calibrate Volume': 'معايرة الحجم',
+ 'Depth': 'عمق',
+ 'Closed': 'مغلق',
+ 'Round': 'مستدير',
+ 'Square': 'ميدان',
+ 'Diamond': 'الماس',
+ 'Edit': 'تصحيح',
+ 'Comment': 'تعليقات',
+ 'Comment Panel': 'لوحة التعليقات',
+ 'Set Status': 'تعيين الحالة',
+ 'Post': 'بريد',
+ 'Page': 'صفحة',
+ 'Add a comment': 'أضف تعليق',
+ 'Add a reply': 'أضف رد',
+ 'Import Annotations': 'استيراد التعليقات التوضيحية',
+ 'Export Annotations': 'شروح التصدير',
+ 'Add': 'أضف',
+ 'Clear': 'واضح',
+ 'Bold': 'بالخط العريض',
+ 'Italic': 'مائل',
+ 'Strikethroughs': 'يتوسطه',
+ 'Underlines': 'تحت الخط',
+ 'Superscript': 'حرف فوقي',
+ 'Subscript': 'الفرعية النصي',
+ 'Align left': 'محاذاة اليسار',
+ 'Align right': 'محاذاة اليمين',
+ 'Center': 'مركز',
+ 'Justify': 'برر',
+ 'Font color': 'لون الخط',
+ 'Text Align': 'محاذاة النص',
+ 'Text Properties': 'نوع الخط',
+ 'Draw Signature': 'ارسم التوقيع',
+ 'Create': 'خلق',
+ 'Font family': 'خط العائلة',
+ 'Font size': 'حجم الخط',
+ 'Free Text': 'نص حر',
+ 'Import Failed': 'نوع ملف سلمان أو اسم الملف غير صالح ؛ يرجى تحديد ملف سلمانصالح',
+ 'File not found': 'لم يتم العثور على ملف سلمان المستورد في الموقع المطلوب',
+ 'Export Failed': 'شل إجراء تصدير التعليقات التوضيحية ؛ يرجى التأكد من إضافة التعليقات التوضيحية بشكل صحيح',
+ 'Dynamic': 'متحرك',
+ 'Standard Business': 'الأعمال القياسية',
+ 'Sign Here': 'وقع هنا',
+ 'Custom Stamp': 'ختم مخصص',
+ 'InitialFieldDialogHeaderText': 'إضافة الأولية',
+ 'HandwrittenInitialDialogHeaderText': 'إضافة الأولية',
+ 'SignatureFieldDialogHeaderText': 'أضف التوقيع',
+ 'HandwrittenSignatureDialogHeaderText': 'أضف التوقيع',
+ 'Draw-hand Signature': 'يرسم',
+ 'Type Signature': 'نوع',
+ 'Upload Signature': 'تحميل',
+ 'Browse Signature Image': 'تصفح',
+ 'Save Signature': 'احفظ التوقيع',
+ 'Save Initial': 'حفظ الأولي',
+ 'Highlight context': 'تسليط الضوء',
+ 'Underline context': 'تسطير',
+ 'Strikethrough context': 'يتوسطه خط',
+ 'FormDesigner': 'إضافة وتحرير حقل النموذج',
+ 'SubmitForm': 'تقديم النموذج',
+ 'Search Text': 'بحث',
+ 'Draw Ink': 'ارسم الحبر',
+ 'Revised': 'مراجعة',
+ 'Reviewed': 'تمت المراجعة',
+ 'Received': 'تم الاستلام',
+ 'Confidential': 'مؤتمن',
+ 'Approved': 'وافق',
+ 'Not Approved': 'غير مقبول',
+ 'Witness': 'الشاهد',
+ 'Initial Here': 'المبدئي هنا',
+ 'Draft': 'مشروع',
+ 'Final': 'أخير',
+ 'For Public Release': 'للنشر العام',
+ 'Not For Public Release': 'ليس للنشر العام',
+ 'For Comment': 'للتعليق',
+ 'Void': 'فارغ',
+ 'Preliminary Results': 'نتائج اولية',
+ 'Information Only': 'المعلومات فقط',
+ 'Enter Signature as Name': 'أدخل أسمك',
+ 'Textbox': 'مربع الكتابة',
+ 'Password': 'كلمه السر',
+ 'Check Box': 'خانة اختيار',
+ 'Radio Button': 'زر الراديو',
+ 'Dropdown': 'اسقاط',
+ 'List Box': 'مربع القائمة',
+ 'Signature': 'إمضاء',
+ 'Delete FormField': 'حذف حقل النموذج',
+ 'FormDesigner Edit text': 'إضافة وتحرير حقل النموذج',
+ 'in': 'في',
+ 'm': 'م',
+ 'ft_in': 'قدم',
+ 'ft': 'قدم',
+ 'p': 'ص',
+ 'cm': 'سم',
+ 'mm': 'مم',
+ 'pt': 'نقطة',
+ 'cu': 'مكعب',
+ 'sq': 'قدم مربع',
+ 'General': 'جنرال لواء',
+ 'Appearance': 'مظهر خارجي',
+ 'Options': 'والخيارات',
+ 'Textbox Properties': 'خصائص مربع النص',
+ 'Name': 'اسم',
+ 'Tooltip': 'تلميح',
+ 'Value': 'القيمة',
+ 'Form Field Visibility': 'رؤية حقل النموذج',
+ 'Read Only': 'يقرأ فقط',
+ 'Required': 'مطلوب',
+ 'Checked': 'التحقق',
+ 'Show Printing': 'عرض الطباعة',
+ 'Formatting': 'صيغة',
+ 'Fill': 'يملأ',
+ 'Border': 'الحدود',
+ 'Border Color': 'لون الحدود',
+ 'Thickness': 'السماكة',
+ 'Max Length': 'الحد الاقصى للطول',
+ 'List Item': 'اسم العنصر',
+ 'Export Value': 'قيمة البند',
+ 'Dropdown Item List': 'قائمة العناصر المنسدلة',
+ 'List Box Item List': 'قائمة عناصر مربع القائمة',
+ 'Delete Item': 'حذف',
+ 'Up': 'فوق',
+ 'Down': 'تحت',
+ 'Multiline': 'متعدد الأسطر',
+ 'Initial': 'أولي',
+ 'Export XFDF': 'تصدير التعليق التوضيحي إلى ملف XFDF',
+ 'Import XFDF': 'استيراد التعليقات التوضيحية من ملف XFDF',
+ 'Organize Pages': 'تنظيم الصفحات',
+ 'Insert Right': 'أدخل الحق',
+ 'Insert Left': 'أدخل اليسار',
+ 'Total': 'المجموع',
+ 'Pages': 'الصفحات',
+ 'Rotate Right': 'تدوير لليمين',
+ 'Rotate Left': 'استدر يسارا',
+ 'Delete Page': 'حذف الصفحة',
+ 'Delete Pages': 'حذف الصفحات',
+ 'Copy Page': 'انسخ الصفحة',
+ 'Copy Pages': 'نسخ الصفحات',
+ 'Save': 'يحفظ',
+ 'Save As': 'حفظ باسم',
+ 'Select All': 'اختر الكل',
+ 'Import Document': 'استيراد المستند',
+ 'Match any word': 'تطابق أي كلمة',
+ 'Client error': 'تم العثور على خطأ في جانب العميل. يرجى التحقق من رؤوس Ajax المخصصة في خاصية AjaxRequestSettings وطرق الويب في خاصية ServerActionSettings',
+ 'Cors policy error': 'تعذر استرداد المستند بسبب عنوان URL غير صالح أو قيود على الوصول. يرجى التحقق من عنوان URL للمستند والمحاولة مرة أخرى',
+ 'No More Matches': 'انتهى العارض من البحث في المستند. لم يتم العثور على تطابقات أخرى',
+ 'No Search Matches': 'لم يتم العثور على تطابقات',
+ 'No More Search Matches': 'لم يتم العثور على تطابقات أخرى',
+ 'Exact Matches': 'تطابقات دقيقة',
+ 'Total Matches': 'إجمالي التطابقات'
+ }
+ }
+});
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ LinkAnnotationService,
+ BookmarkViewService,
+ ThumbnailViewService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ 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> A comprehensive list of localization files and default strings is available on GitHub: [GitHub Locale](https://github.com/syncfusion/ej2-locale). Provide only keys that require overrides; missing keys fall back to the default `en-US` values.
+
+## See Also
+
+- [Default Language](./default-language)
+- [New Language](./new-language)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/Migration/Migrating-from-Nutrient-PSPDFKit.md b/Document-Processing/PDF/PDF-Viewer/angular/Migration/Migrating-from-Nutrient-PSPDFKit.md
new file mode 100644
index 0000000000..ce8e7ac052
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/Migration/Migrating-from-Nutrient-PSPDFKit.md
@@ -0,0 +1,203 @@
+---
+layout: post
+title: Migrating from Nutrient (PSPDFKit) to Angular PDF Viewer | Syncfusion
+description: Learn here all about how to migrate from Nutrient.io (PSPDFKit) Web SDK to Syncfusion Angular PDF Viewer.
+platform: document-processing
+documentation: ug
+control: PDF Viewer
+---
+
+# Migrating from Nutrient Web SDK to Syncfusion Angular PDF Viewer
+
+This guide helps you migrate an Angular application built using **Nutrient Web SDK (formerly PSPDFKit Web SDK)** to the **Syncfusion Angular PDF Viewer**. It mirrors the React migration guide but is tailored specifically for **Angular architecture, modules, and component life cycle**.
+
+The objective is to replace the **imperative SDK-based initialization** used by Nutrient with the **declarative Angular component model** provided by Syncfusion.
+
+## Overview
+
+| Aspect | Nutrient Web SDK | Syncfusion Angular PDF Viewer |
+|-------|------------------|------------------------------|
+| Integration style | SDK initialization via `load()` | Declarative Angular component |
+| Framework pattern | Framework-agnostic | Native Angular component |
+| UI | SDK-provided UI | Built-in Angular toolbar |
+| Annotations & forms | SDK APIs | Angular services & APIs |
+| Hosting | Local / CDN | Fully client-side |
+
+## Architectural Differences
+
+### Nutrient Web SDK (PSPDFKit)
+- Viewer mounted imperatively into a DOM element
+- Manual life cycle handling (`load`, `unload`)
+- SDK-managed UI and events
+
+### Syncfusion Angular PDF Viewer
+- Viewer rendered using `
+
+ `,
+ imports: [PdfViewerModule],
+ providers: [ToolbarService, AnnotationService]
+})
+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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Area Annotation
+
+### Add Area Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement** → **Area**.
+3. Click points to define the polygon; double‑click to close and finalize the area.
+
+
+
+> **Tip:** If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
+
+### Enable Area Mode
+Programmatically switch the viewer into Area mode.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+enableAreaMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Area');
+}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Area Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+exitAreaMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Add Area Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw an area by providing **vertexPoints** for a closed region.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addArea(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ pdfViewer.annotation.addAnnotation('Area', {
+ offset: { x: 200, y: 500 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 500 },
+ { x: 288, y: 499 },
+ { x: 289, y: 553 },
+ { x: 200, y: 500 }
+ ]
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Area Appearance
+Configure default properties using the [`Area Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#areasettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% 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 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';
+
+ // Area annotation default settings
+ public areaSettings = {
+ fillColor: 'yellow',
+ strokeColor: 'orange',
+ opacity: 0.6
+ };
+}
+``
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Area (Move, Reshape, Edit, Delete)
+- **Move**: Drag inside the polygon to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Perimeter
+
+#### Edit Perimeter (UI)
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line‑based options.
+ 
+
+#### Edit Area Programmatically
+
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+editAreaProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ for (const annotation of pdfViewer.annotationCollection) {
+ if (annotation.subject === 'Area calculation') {
+ annotation.strokeColor = '#0000FF';
+ annotation.thickness = 2;
+ annotation.fillColor = '#FFFF00';
+
+ pdfViewer.annotation.editAnnotation(annotation);
+ break;
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Distance Annotation
+
+Delete Distance Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Area using the [`areaSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#areasettings) property.
+
+{% 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 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';
+
+ // Area annotation default settings
+ public areaSettings = {
+ fillColor: 'yellow',
+ strokeColor: 'orange',
+ opacity: 0.6
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addStyledArea(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ pdfViewer.annotation.addAnnotation('Area', {
+ offset: { x: 210, y: 510 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 210, y: 510 },
+ { x: 300, y: 510 },
+ { x: 305, y: 560 },
+ { x: 210, y: 510 }
+ ],
+ strokeColor: '#EA580C',
+ fillColor: '#FEF3C7',
+ thickness: 2,
+ opacity: 0.85
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio and Units
+- Use **Scale Ratio** from the context menu to set the actual‑to‑page scale.
+ 
+- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#mesaurementsettings).
+
+{% 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 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';
+
+ // Area / Measurement configuration
+ public measurementSettings = {
+ scaleRatio: 2,
+ conversionUnit: 'cm',
+ displayUnit: 'cm'
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Area Events
+
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Area measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/arrow-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/arrow-annotation.md
new file mode 100644
index 0000000000..b207d0205e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/arrow-annotation.md
@@ -0,0 +1,323 @@
+---
+layout: post
+title: Arrow Annotation (Shape) in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Arrow annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Arrow Annotation (Shape) in Angular PDF Viewer
+Arrow annotations let users point, direct attention, or indicate flow on PDFs—useful for callouts, direction markers, and connectors during reviews. You can add arrows from the toolbar, switch to arrow mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+## Enable Arrow Annotation in the Viewer
+
+To enable Arrow annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Arrow Annotation
+
+### Add Arrow Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Arrow**.
+3. Click and drag on the PDF page to draw the arrow.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Arrow Mode
+Switch the viewer into arrow mode using `setAnnotationMode('Arrow')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableArrowMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Arrow');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Arrow Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitArrowMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Arrow Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw an arrow at a specific location (defined by two **vertexPoints**).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addArrow(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 200, y: 370 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 370 },
+ { x: 350, y: 370 }
+ ]
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Arrow Appearance
+Configure default arrow appearance (fill color, stroke color, thickness, opacity) using the [`arrowSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#arrowsettings) property.
+
+{% 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 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';
+
+ // Arrow annotation default settings
+ public arrowSettings = {
+ fillColor: '#ffff00',
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> For **Line** and **Arrow** annotations, **Fill Color** is available only when an arrowhead style is applied at the **Start** or **End**. If both are `None`, lines do not render fill and the Fill option remains disabled.
+
+## Manage Arrow (Edit, Move, Resize, Delete)
+### Edit Arrow
+
+#### Edit Arrow (UI)
+- Select a Arrow to view resize handles.
+- Drag endpoints to adjust length/angle.
+- Edit stroke color, opacity, and thickness using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Line Properties**
+Open the Line Properties dialog via **Right Click → Properties**.
+
+
+
+#### Edit Arrow Programmatically
+
+Modify an existing Arrow programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editArrowProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const annot of pdfViewer.annotationCollection) {
+ if (annot.subject === 'Arrow') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Arrow
+
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to arrow annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual arrow annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addMultipleArrows(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ // Arrow 1
+ pdfViewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ],
+ fillColor: '#ffff00',
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Arrow 2
+ pdfViewer.annotation.addAnnotation('Arrow', {
+ offset: { x: 220, y: 300 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 300 },
+ { x: 400, y: 300 }
+ ],
+ fillColor: '#ffef00',
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.9,
+ author: 'User 2'
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Arrow Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Arrow Events
+
+The PDF viewer provides annotation life-cycle events that notify when Arrow annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/circle-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/circle-annotation.md
new file mode 100644
index 0000000000..bfdde42fa7
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/circle-annotation.md
@@ -0,0 +1,317 @@
+---
+layout: post
+title: Circle Annotation (Shape) in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Circle annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Circle Annotation (Shape) in Angular PDF Viewer
+Circle annotations let users highlight circular regions or draw emphasis bubbles on PDFs for reviews and markups. You can add circles from the toolbar, switch to circle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+## Enable Circle Annotation in the Viewer
+
+To enable Circle annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Circle Annotation
+
+### Apply Circle Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Circle**.
+3. Click and drag on the PDF page to draw the circle (ellipse).
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Circle Mode
+
+Switch the viewer into circle mode using `setAnnotationMode('Circle')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableCircleMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Circle');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Circle Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitCircleMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Circle Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw a circle (ellipse) at a specific location.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addCircle(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Circle', {
+ offset: { x: 200, y: 620 },
+ pageNumber: 1,
+ width: 90,
+ height: 90
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Circle Appearance
+Configure default circle appearance (fill color, stroke color, thickness, opacity) using the [`circleSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#circlesettings) property.
+
+{% 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 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';
+
+ // Circle annotation default settings
+ public circleSettings = {
+ fillColor: '#ffa500',
+ strokeColor: '#ff6a00',
+ thickness: 2,
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Circle (Edit, Move, Resize, Delete)
+
+### Edit Circle
+
+#### Edit Circle (UI)
+
+- Select a Circle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+#### Edit Circle Programmatically
+
+Modify an existing Circle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editCircleProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const annot of pdfViewer.annotationCollection) {
+ if (annot.subject === 'Circle') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Circle
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to circle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Set properties for individual circle annotations by passing values directly during [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addMultipleCircles(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ // Circle 1
+ pdfViewer.annotation.addAnnotation('Circle', {
+ offset: { x: 200, y: 620 },
+ pageNumber: 1,
+ width: 100,
+ height: 100,
+ opacity: 0.9,
+ strokeColor: '#ff6a00',
+ fillColor: '#ffa500',
+ author: 'User 1'
+ });
+
+ // Circle 2
+ pdfViewer.annotation.addAnnotation('Circle', {
+ offset: { x: 340, y: 620 },
+ pageNumber: 1,
+ width: 80,
+ height: 80,
+ opacity: 0.85,
+ strokeColor: '#ff1010',
+ fillColor: '#ffe600',
+ author: 'User 2'
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Circle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Circle Events
+
+The PDF viewer provides annotation life-cycle events that notify when Circle annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/distance-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/distance-annotation.md
new file mode 100644
index 0000000000..13937aca6c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/distance-annotation.md
@@ -0,0 +1,354 @@
+---
+layout: post
+title: Add Distance Annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, measure, customize, and manage Distance annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Distance Annotations in Angular PDF Viewer
+Distance is a measurement annotation used to measure the length between two points on a PDF page. Use it for precise reviews, markups, or engineering measurements.
+
+
+
+## Enable Distance Annotation
+
+To enable Distance annotation, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Distance Annotation
+
+### Add Distance Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement** → **Distance**.
+3. Click to set the start point, then click again to set the end point.
+
+
+
+N> If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
+
+### Enable Distance Mode
+Programmatically switch the viewer into Distance mode.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableDistanceMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Distance');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Distance Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitDistanceMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Distance Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw a Distance measurement by providing two **vertexPoints**.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addDistance(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Distance', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ]
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Distance Appearance
+Configure default properties using the [`Distance Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#distancesettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% 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 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';
+
+ // Distance annotation default settings
+ public distanceSettings = {
+ fillColor: 'blue',
+ strokeColor: 'green',
+ opacity: 0.6
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Distance (Move, Resize, Edit, Delete)
+- **Move**: Drag the measurement to reposition it.
+- **Resize**: Drag the end handles to adjust the length.
+
+### Edit Distance
+
+#### Edit Distance (UI)
+Change **stroke color**, **thickness**, and **opacity** using the annotation toolbar tools.
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line-based options.
+
+
+#### Edit Distance Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editDistanceProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.subject === 'Distance calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Distance Annotation
+
+Delete Distance Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Distance using the [`distanceSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#distancesettings) property.
+
+{% 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 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';
+
+ // Distance annotation default settings
+ public distanceSettings = {
+ fillColor: 'blue',
+ strokeColor: 'green',
+ opacity: 0.6
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per-annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addStyledDistance(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Distance', {
+ offset: { x: 220, y: 260 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 260 },
+ { x: 360, y: 260 }
+ ],
+ strokeColor: '#059669',
+ opacity: 0.9,
+ fillColor: '#D1FAE5',
+ thickness: 2
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio and Units
+
+- Use **Scale Ratio** from the context menu to set the actual-to-page scale.
+ 
+- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#measurementsettings).
+
+{% 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 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';
+
+ // Distance / Measurement configuration
+ public measurementSettings = {
+ scaleRatio: 2,
+ conversionUnit: 'cm',
+ displayUnit: 'cm'
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Distance Events
+
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Distance measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/free-text-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/free-text-annotation.md
new file mode 100644
index 0000000000..e4a186fda0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/free-text-annotation.md
@@ -0,0 +1,310 @@
+---
+layout: post
+title: Add Free Text Annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, add, customize, and manage Free Text (text box) annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Free Text Annotations in Angular PDF Viewer
+Free Text annotations let users place editable text boxes on a PDF page to add comments, labels, or notes without changing the original document content.
+
+## Enable Free Text in the Viewer
+
+To enable Free Text in the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Free Text
+
+### Add Free Text Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Click **Free Text** to enable Free Text mode.
+3. Click on the page to place the text box and start typing.
+
+
+
+N> When Pan mode is active, choosing Free Text switches the viewer into the appropriate selection/edit workflow for a smoother experience.
+
+### Enable Free Text Mode
+
+Programmatically switch to Free Text mode.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableFreeTextMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('FreeText');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Free Text Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitFreeTextMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Free Text Programmatically
+
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to create a text box at a given location with desired styles.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addFreeTextProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('FreeText', {
+ offset: { x: 100, y: 150 },
+ pageNumber: 1,
+ width: 220,
+ height: 48,
+ defaultText: 'Syncfusion',
+ fontFamily: 'Helvetica',
+ fontSize: 16,
+ fontColor: '#ffffff',
+ textAlignment: 'Center',
+ borderStyle: 'solid',
+ borderWidth: 2,
+ borderColor: '#ff0000',
+ fillColor: '#0000ff',
+ isLock: false
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Free Text Appearance
+
+Configure default properties using the [`FreeTextSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#freetextsettings) property (for example, default **fill color**, **border color**, **font color**, **opacity**, and **auto‑fit**).
+
+{% 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 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';
+
+ // FreeText annotation default settings
+ public freeTextSettings = {
+ fillColor: 'green',
+ borderColor: 'blue',
+ fontColor: 'yellow',
+ opacity: 0.3,
+ enableAutoFit: true
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> To tailor right‑click options, see [**Customize Context Menu**](../../context-menu/custom-context-menu).
+
+## Modify, Edit, Delete Free Text
+
+- **Move/Resize**: Drag the box or use the resize handles.
+- **Edit Text**: Click inside the box and type.
+- **Delete**: Use the toolbar or context menu options. For deletion workflows and API details, see [**Delete Annotation**](../remove-annotations).
+
+### Edit Free Text
+
+#### Edit Free Text (UI)
+
+Use the annotation toolbar to configure font family, size, color, alignment, styles, fill color, stroke color, border thickness, and opacity.
+
+- Edit the **font family** using the Font Family tool.
+
+
+- Edit the **font size** using the Font Size tool.
+
+
+- Edit the **font color** using the Font Color tool.
+
+
+- Edit the **text alignment** using the Text Alignment tool.
+
+
+- Edit the **font styles** (bold, italic, underline) using the Font Style tool.
+
+
+- Edit the **fill color** using the Edit Color tool.
+
+
+- Edit the **stroke color** using the color palette in the Edit Stroke Color tool.
+
+
+- Edit the **border thickness** using the Edit Thickness tool.
+
+
+- Edit the **opacity** using the Edit Opacity tool.
+
+
+#### Edit Free Text Programmatically
+
+Update bounds or text and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editFreeTextProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.subject === 'Text Box') {
+ const { width, height } = ann.bounds;
+ ann.bounds = { x: 120, y: 120, width, height };
+ ann.dynamicText = 'Syncfusion (updated)';
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Free Text annotations do **not** modify the original PDF text; they overlay editable text boxes on top of the page content.
+
+### Delete Free Text
+
+Delete Free Text via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for new text boxes using the [`freeTextSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#freetextsettings) property. You can also enable **Auto‑fit** so the box expands with content.
+
+{% 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 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';
+
+ // FreeText annotation default settings
+ public freeTextSettings = {
+ fillColor: 'green',
+ borderColor: 'blue',
+ fontColor: 'yellow',
+ enableAutoFit: true
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Free Text Annotation Events
+
+Listen to add/modify/select/remove events for Free Text and handle them as needed. For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+
+Free Text annotations can be exported or imported just like other annotations. For supported formats and steps, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/highlight-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/highlight-annotation.md
new file mode 100644
index 0000000000..7d0327ecc3
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/highlight-annotation.md
@@ -0,0 +1,319 @@
+---
+layout: post
+title: Highlight Text in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Highlight annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Highlight Annotation (Text Markup) in Angular PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Highlight* text markup annotations in the Syncfusion **Angular PDF Viewer**.
+You can highlight text using the toolbar or context menu, programmatically invoke highlight mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Highlight in the Viewer
+
+To enable Highlight annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and highlighting.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Highlight Annotation
+
+### Add Highlight Using the Toolbar
+
+1. Select the text you want to highlight.
+2. Click the **Highlight** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+### Apply highlight using Context Menu
+
+Right-click a selected text region → select **Highlight**.
+
+
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Highlight Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Highlight')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableHighlight(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Highlight');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Highlight Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+disableHighlightMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Highlight Programmatically
+
+Use [`addAnnotation()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) to insert highlight at a specific location.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addHighlight(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ pdfViewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Highlight Appearance
+
+Configure default highlight settings such as **color**, **opacity**, and **author** using [`highlightSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#highlightsettings).
+
+{% 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 highlightSettings = {
+ author: 'Guest User',
+ subject: 'Important',
+ color: '#ffff00',
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Highlight (Edit, Delete, Comment)
+
+### Edit Highlight
+
+#### Edit Highlight Appearance (UI)
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+#### Edit Highlight Programmatically
+
+Modify an existing highlight programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editHighlightProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ for (let annot of pdfViewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Highlight') {
+ annot.color = '#0000ff';
+ annot.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Highlight
+
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [Delete Annotation](../remove-annotations)
+
+### Comments
+
+Use the [Comments panel](../comments) to add, view, and reply to threaded discussions linked to underline annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual annotation before creating the control using [highlightSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#highlightsettings)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addMultipleHighlights(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ // Highlight 1
+ pdfViewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+
+ // Highlight 2
+ pdfViewer.annotation.addAnnotation('Highlight', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+
+Disable text markup annotations (including highlight) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Highlight Events
+
+The PDF viewer provides annotation life-cycle events that notify when highlight annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [Export and Import Annotation](../export-import-annotations)
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/ink-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/ink-annotation.md
new file mode 100644
index 0000000000..2ba270ea95
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/ink-annotation.md
@@ -0,0 +1,230 @@
+---
+layout: post
+title: Add Freehand Draw (Ink) Annotation in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Ink (freehand) annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Freehand Drawing (Ink) Annotations in Angular PDF Viewer
+Ink annotations allow users to draw freehand strokes using mouse, pen, or touch input to mark content naturally.
+
+
+
+## Enable Freehand Drawing (Ink)
+
+To enable ink annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Ink annotation
+
+### Draw Freehand Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Click **Draw Ink**.
+3. Draw freehand on the page.
+
+
+
+### Enable Ink Mode
+Switch the viewer into ink annotation mode programmatically.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableInkMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Ink');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Ink Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitInkMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Ink Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to create an ink stroke by providing a path (an array of move/line commands), bounds, and target page.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addInkProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Ink', {
+ offset: { x: 150, y: 100 },
+ pageNumber: 1,
+ width: 200,
+ height: 60,
+ path: '[{"command":"M","x":244.83,"y":982.00},{"command":"L","x":250.83,"y":953.33}]'
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Ink Appearance
+You can customize **stroke color**, **thickness**, and **opacity** using the [`inkAnnotationSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#inkannotationsettings) property.
+
+{% 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 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 inkAnnotationSettings = {
+ author: 'Guest',
+ strokeColor: '#0066ff',
+ thickness: 3,
+ opacity: 0.85
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Erase, Modify, or Delete Ink Strokes
+- **Move**: Drag the annotation.
+- **Resize**: Use selector handles.
+- **Change appearance**: Use Edit Stroke Color, Thickness, and Opacity tools.
+- **Delete**: Via toolbar or context menu.
+- **Customize context menu**: See [Customize Context Menu](../../context-menu/custom-context-menu).
+
+### Edit ink annotation in UI
+
+Stroke color, thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+- Edit the **stroke color** using the color palette in the Edit Stroke Color tool.
+
+
+
+- Edit **thickness** using the range slider in the Edit Thickness tool.
+
+
+
+- Edit **opacity** using the range slider in the Edit Opacity tool.
+
+
+
+### Edit Ink Programmatically
+
+Modify an existing ink programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editInkProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.shapeAnnotationType === 'Ink') {
+ const { width, height } = ann.bounds;
+ ann.bounds = { x: 120, y: 120, width, height };
+ ann.strokeColor = '#ff0000';
+ ann.thickness = 4;
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Ink
+
+Delete Ink via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Ink Annotation Events
+
+The PDF viewer provides annotation life‑cycle events that notify when Ink annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+Ink annotations can be exported or imported along with other annotations.
+See [Export and Import annotations](../export-import-annotations).
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotation](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/line-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/line-annotation.md
new file mode 100644
index 0000000000..4c9a7594cc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/line-annotation.md
@@ -0,0 +1,328 @@
+---
+layout: post
+title: Line Annotation (Shape) in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Line annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Line Annotation (Shape) in Angular PDF Viewer
+
+Line annotations allow users to draw straight connectors or callouts on PDFs for markup, review, diagrams, or measurement guides. They support customization of color, thickness, opacity, and arrowheads, and can be edited, resized, deleted, or exported along with the document.
+
+
+
+## Enable Line Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Line Annotation
+
+### Add Line Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Line**.
+3. Click and drag on the PDF page to draw the line.
+
+
+
+> **Note:** When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Line Mode
+
+Switch the viewer into line mode using `setAnnotationMode('Line')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableLineMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Line');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Line Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitLineMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Line Programmatically
+
+You can add line annotations using the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addLine(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Line', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ]
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Line Appearance
+
+Configure default line appearance using the [`lineSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#linesettings) property.
+
+{% 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 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 lineSettings = {
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Fill color is available only when an arrowhead style is applied at the Start or End of the line. If both are set to `None`, the Fill option is disabled.
+
+## Manage Line (Edit, Move, Resize, Delete)
+
+### Edit Line
+
+#### Edit Line Appearance (UI)
+- Select a line to view resize handles.
+- Drag endpoints to adjust length/angle.
+- Edit stroke color, opacity, and thickness using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Line Properties**
+Open the Line Properties dialog via **Right Click → Properties**.
+
+
+
+#### Edit Line Programmatically
+
+Modify an existing Line programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editLineProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const annot of pdfViewer.annotationCollection) {
+ if (annot.subject === 'Line') {
+ annot.strokeColor = '#ff0000';
+ annot.thickness = 3;
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Line
+
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to line annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+
+Set properties for individual line annotations using the [`lineSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#linesettings) API or by passing per‑annotation values during [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addMultipleLines(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ // Line 1
+ pdfViewer.annotation.addAnnotation('Line', {
+ offset: { x: 200, y: 230 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 230 },
+ { x: 350, y: 230 }
+ ],
+ strokeColor: '#0066ff',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Line 2
+ pdfViewer.annotation.addAnnotation('Line', {
+ offset: { x: 220, y: 300 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 220, y: 300 },
+ { x: 400, y: 300 }
+ ],
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.9,
+ author: 'User 2'
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Line Annotation
+
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Line Events
+
+The PDF viewer provides annotation life-cycle events that notify when Line annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/perimeter-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/perimeter-annotation.md
new file mode 100644
index 0000000000..0754619dd2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/perimeter-annotation.md
@@ -0,0 +1,356 @@
+---
+layout: post
+title: Add Perimeter Annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Perimeter measurement annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Perimeter Measurement Annotations in Angular PDF Viewer
+Perimeter is a measurement annotation used to calculate the length around a closed polyline on a PDF page—useful for technical markups and reviews.
+
+
+
+## Enable Perimeter Measurement
+
+To enable Perimeter annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Perimeter Annotation
+
+### Add Perimeter Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement** → **Perimeter**.
+3. Click multiple points to define the polyline; double‑click to close and finalize the perimeter.
+
+
+
+> **Note:** If Pan mode is active, choosing a measurement tool switches the viewer into the appropriate interaction mode for a smoother workflow.
+
+### Enable Perimeter Mode
+Programmatically switch the viewer into Perimeter mode.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enablePerimeterMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('Perimeter');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Perimeter Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitPerimeterMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotationModule.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Perimeter Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw a perimeter by providing multiple **vertexPoints**.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addPerimeter(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Perimeter', {
+ offset: { x: 200, y: 350 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 350 },
+ { x: 285, y: 350 },
+ { x: 286, y: 412 }
+ ]
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Perimeter Appearance
+Configure default properties using the [`perimeterSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#perimetersettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% 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 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';
+
+ // Perimeter annotation default settings
+ public perimeterSettings = {
+ fillColor: 'blue',
+ strokeColor: 'green',
+ opacity: 0.6
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Perimeter (Move, Reshape, Edit, Delete)
+- **Move**: Drag inside the shape to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Perimeter
+
+#### Edit Perimeter (UI)
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line‑based options.
+ 
+
+#### Edit Perimeter Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editPerimeterProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.subject === 'Perimeter calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.fillColor = '#FFFF00';
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Perimeter Annotation
+
+Delete Perimeter Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Perimeter using the [`perimeterSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#perimetersettings) property.
+
+{% 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 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';
+
+ // Perimeter annotation default settings
+ public perimeterSettings = {
+ fillColor: 'green',
+ strokeColor: 'blue',
+ opacity: 0.6
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Pass per‑annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addStyledPerimeter(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Perimeter', {
+ offset: { x: 240, y: 360 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 240, y: 360 },
+ { x: 320, y: 360 },
+ { x: 330, y: 410 }
+ ],
+ strokeColor: '#1D4ED8',
+ fillColor: '#DBEAFE',
+ thickness: 2,
+ opacity: 0.85
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio and Units
+
+- Use **Scale Ratio** from the context menu to set the actual‑to‑page scale.
+ 
+- Supported units include **Inch, Millimeter, Centimeter, Point, Pica, Feet**.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#measurementsettings).
+
+{% 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 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';
+
+ // Perimeter / Measurement configuration
+ public measurementSettings = {
+ scaleRatio: 2,
+ conversionUnit: 'cm',
+ displayUnit: 'cm'
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Perimeter Events
+
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Perimeter measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/polygon-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/polygon-annotation.md
new file mode 100644
index 0000000000..2c52da478f
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/polygon-annotation.md
@@ -0,0 +1,315 @@
+---
+layout: post
+title: Polygon Annotation (Shape) in Angular PDF Viewer \ Syncfusion
+description: Learn how to enable, apply, customize, and manage Polygon annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Polygon Annotation (Shape) in Angular PDF Viewer
+Polygon annotations allow users to outline irregular regions, draw custom shapes, highlight non-rectangular areas, or create specialized callouts on PDFs for review and markup.
+
+
+
+## Enable Polygon Annotation in the Viewer
+
+To enable Line annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+
+{% 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 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';
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Add Polygon Annotation
+
+### Add Polygon Annotation Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Polygon**.
+3. Click multiple points on the page to draw the polygon.
+4. Double-click to finalize the shape.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Polygon Mode
+
+Switch the viewer into highlight mode using `setAnnotationMode('Polygon')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+enablePolygonMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('Polygon');
+}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Polygon Mode
+
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+exitPolygonMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('None');
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Add Polygon Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw a polygon by specifying multiple `vertexPoints`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addPolygon(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ pdfViewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 200, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 800 }, { x: 242, y: 771 },
+ { x: 289, y: 799 }, { x: 278, y: 842 },
+ { x: 211, y: 842 }, { x: 200, y: 800 }
+ ]
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Polygon Appearance
+Configure default polygon appearance (fill color, stroke color, thickness, opacity) using the [`polygonSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#polygonsettings) property.
+
+{% 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 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 polygonSettings = {
+ fillColor: '#ffa5d8',
+ strokeColor: '#ff6a00',
+ thickness: 2,
+ opacity: 0.9
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Polygon (Edit, Move, Resize, Delete)
+
+### Edit Circle
+
+#### Edit Circle (UI)
+
+- Select a Circle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+#### Edit Polygon Programmatically
+
+Modify an existing Circle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+editPolygonProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ for (const annot of pdfViewer.annotationCollection) {
+ if (annot.subject === 'Polygon') {
+ annot.strokeColor = '#0000ff';
+ annot.thickness = 2;
+ annot.fillColor = '#ffff00';
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Polygon
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to polygon annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Configure per-annotation appearance while adding a polygon using [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addMultiplePolygons(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ // Polygon 1
+ pdfViewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 200, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 200, y: 800 }, { x: 242, y: 771 },
+ { x: 289, y: 799 }, { x: 278, y: 842 },
+ { x: 211, y: 842 }, { x: 200, y: 800 }
+ ],
+ fillColor: '#ffa5d8',
+ strokeColor: '#ff6a00',
+ thickness: 2,
+ opacity: 0.9,
+ author: 'User 1'
+ });
+
+ // Polygon 2
+ pdfViewer.annotation.addAnnotation('Polygon', {
+ offset: { x: 360, y: 800 },
+ pageNumber: 1,
+ vertexPoints: [
+ { x: 360, y: 800 }, { x: 410, y: 770 },
+ { x: 450, y: 810 }, { x: 430, y: 850 },
+ { x: 380, y: 850 }, { x: 360, y: 800 }
+ ],
+ fillColor: '#ffe600',
+ strokeColor: '#ff1010',
+ thickness: 3,
+ opacity: 0.85,
+ author: 'User 2'
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Shape Annotation
+Disable shape annotations (Polygon, Line, Rectangle, Circle, Arrow) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% 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 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';
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Polygon Events
+
+The PDF viewer provides annotation life-cycle events that notify when Polygon annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/radius-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/radius-annotation.md
new file mode 100644
index 0000000000..ebf4ffc804
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/radius-annotation.md
@@ -0,0 +1,326 @@
+---
+layout: post
+title: Add Radius Measurement Annotations in Angular PDF Viewer \ Syncfusion
+description: Learn how to enable, draw, customize, and manage Radius measurement annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Radius Measurement Annotations in Angular PDF Viewer
+Radius measurement annotations allow users to draw circular regions and calculate the radius visually.
+
+
+
+## Enable Radius Measurement
+
+To enable Radius annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Add Radius Annotation
+
+### Add Radius Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement → Radius**.
+3. Click and drag on the page to draw the radius.
+
+
+
+N> If Pan mode is active, selecting the Radius tool automatically switches interaction mode.
+
+### Enable Radius Mode
+Programmatically switch the viewer into Radius mode.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+enableRadiusMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('Radius');
+}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Radius Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+exitRadiusMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('None');
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Add Radius Programmatically
+Configure default properties using the [`Radius Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#radiussettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addRadius(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Radius', {
+ offset: { x: 200, y: 630 },
+ pageNumber: 1,
+ width: 90,
+ height: 90
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Radius Appearance
+Configure default properties using the [`Radius Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#radiussettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% 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 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 radiusSettings = {
+ fillColor: 'yellow',
+ strokeColor: 'orange',
+ opacity: 0.6
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Radius (Move, Reshape, Edit, Delete)
+- **Move**: Drag inside the polygon to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Radius Annotation
+
+#### Edit Radius (UI)
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line‑based options.
+ 
+
+#### Edit Radius Programmatically
+
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+editRadiusProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.subject === 'Radius calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Radius Annotation
+
+Delete Radius Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Radius using the [`radiusSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#radiussettings) property.
+
+{% 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 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 radiusSettings = {
+ fillColor: 'orange',
+ opacity: 0.6,
+ strokeColor: 'pink'
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Apply defaults for Area using the [`radiusSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#radiussettings) property.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addStyledRadius(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Radius', {
+ offset: { x: 200, y: 630 },
+ pageNumber: 1,
+ width: 90,
+ height: 90,
+ fillColor: 'orange',
+ opacity: 0.6,
+ strokeColor: 'pink'
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio & Units
+- Use **Scale Ratio** from the context menu.
+ 
+- Supported units: Inch, Millimeter, Centimeter, Point, Pica, Feet.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#mesaurementsettings).
+
+{% 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 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 measurementSettings = {
+ scaleRatio: 2,
+ conversionUnit: 'cm',
+ displayUnit: 'cm'
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Radius Events
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Radius measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
+
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/rectangle-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/rectangle-annotation.md
new file mode 100644
index 0000000000..cf24aff2ff
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/rectangle-annotation.md
@@ -0,0 +1,305 @@
+---
+layout: post
+title: Rectangle Annotation (Shape) in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Rectangle annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rectangle Annotation (Shape) in Angular PDF Viewer
+Rectangle annotations let users highlight regions, group content, or draw callout boxes on PDFs for reviews and markups. You can add rectangles from the toolbar, switch to rectangle mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.
+
+
+
+## Enable Rectangle Annotation in the Viewer
+
+To enable Rectangle annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Rectangle Annotation
+
+### Add Rectangle Annotation Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Shapes** → **Rectangle**.
+3. Click and drag on the PDF page to draw the rectangle.
+
+
+
+N> When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.
+
+### Enable Rectangle Mode
+Switch the viewer into rectangle mode using `setAnnotationMode('Rectangle')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+enableRectangleMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('Rectangle');
+}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Rectangle Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+exitRectangleMode(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('None');
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Add Rectangle Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to draw a rectangle at a specific location.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addRectangle(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ pdfViewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 200, y: 480 },
+ pageNumber: 1,
+ width: 150,
+ height: 75
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Rectangle Appearance
+Configure default rectangle appearance (fill color, stroke color, thickness, opacity) using the [`rectangleSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#rectanglesettings) property.
+
+{% 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 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';
+
+ // Rectangle annotation default settings
+ public rectangleSettings = {
+ fillColor: '#ffff00',
+ strokeColor: '#ff6a00',
+ thickness: 2,
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Rectangle (Edit, Move, Resize, Delete)
+### Edit Rectangle
+
+#### Edit Rectangle (UI)
+- Select a rectangle to view resize handles.
+- Drag any side/corner to resize; drag inside the shape to move it.
+- Edit **fill**, **stroke**, **thickness**, and **opacity** using the annotation toolbar.
+
+
+
+Use the annotation toolbar:
+- **Edit fill Color** tool
+
+
+- **Edit stroke Color** tool
+
+
+- **Edit Opacity** slider
+
+
+- **Edit Thickness** slider
+
+
+
+#### Edit Rectangle Programmatically
+
+Modify an existing Rectangle programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+editRectangleProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ for (const annotation of pdfViewer.annotationCollection) {
+ if (annotation.subject === 'Rectangle') {
+ annotation.strokeColor = '#0000FF';
+ annotation.thickness = 2;
+ annotation.fillColor = '#FFFF00';
+
+ pdfViewer.annotation.editAnnotation(annotation);
+ break;
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Rectangle
+The PDF Viewer supports deleting existing annotations through the UI and API.
+See [**Delete Annotation**](../remove-annotations) for full behavior and workflows.
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to rectangle annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.
+
+## Set Properties While Adding Individual Annotation
+Pass per-annotation values directly when calling [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addStyledRectangles(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ // Rectangle 1
+ pdfViewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 200, y: 480 },
+ pageNumber: 1,
+ width: 150,
+ height: 75,
+ opacity: 0.9,
+ strokeColor: '#ff6a00',
+ fillColor: '#ffff00',
+ author: 'User 1'
+ });
+
+ // Rectangle 2
+ pdfViewer.annotation.addAnnotation('Rectangle', {
+ offset: { x: 380, y: 480 },
+ pageNumber: 1,
+ width: 120,
+ height: 60,
+ opacity: 0.85,
+ strokeColor: '#ff1010',
+ fillColor: '#ffe600',
+ author: 'User 2'
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Disable Rectangle Annotation
+Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the [`enableShapeAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enableshapeannotation) property.
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Rectangle Events
+
+The PDF viewer provides annotation life-cycle events that notify when Rectangle annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/redaction-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/redaction-annotation.md
new file mode 100644
index 0000000000..e65094450b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/redaction-annotation.md
@@ -0,0 +1,215 @@
+---
+layout: post
+title: PDF Redaction in Angular PDF Viewer | Syncfusion
+description: Learn to add, edit, delete, and apply redaction annotations in Syncfusion Angular PDF Viewer with UI and programmatic examples.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Redaction annotation in Angular PDF Viewer
+
+Redaction annotations permanently remove sensitive content from a PDF. You can draw redaction marks over text or graphics, redact entire pages, customize overlay text and styling, and apply redaction to finalize.
+
+
+
+## Add Redaction Annotation
+
+### Add redaction annotations in UI
+- Use the **Redaction** tool from the toolbar to draw over content to hide it.
+- Redaction marks can show overlay text (for example, “Confidential”) and can be styled.
+
+
+
+Redaction annotations are interactive:
+- **Movable**
+
+- **Resizable**
+
+
+You can also add redaction annotations from the **context menu** by selecting content and choosing **Redact Annotation**.
+
+
+N> Ensure the **Redaction** tool is included in the toolbar. See [RedactionToolbar](../../Redaction/toolbar.md) for configuration.
+
+### Add redaction annotations programmatically (Angular)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addRedactionProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+ pdfViewer.annotation.addAnnotation('Redaction', {
+ bound: { x: 200, y: 480, width: 150, height: 75 },
+ pageNumber: 1,
+ markerFillColor: '#000',
+ markerBorderColor: '#fff',
+ fillColor: '#000',
+ overlayText: 'Confidential',
+ fontColor: '#fff',
+ fontFamily: 'Times New Roman',
+ fontSize: 10,
+ beforeRedactionsApplied: false
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+Track additions using the `annotationAdd` event (wired above as a component prop).
+
+## Edit Redaction Annotations
+
+### Edit redaction annotations in UI
+Use the viewer to select, move, and resize Redaction annotations. Use the context menu for additional actions.
+
+#### Edit the properties of redaction annotations in UI
+Use the property panel or **context menu → Properties** to change overlay text, font, fill color, and more.
+
+
+
+### Edit redaction annotations programmatically (Angular)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+editFirstRedaction(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ const annotations = pdfViewer.annotationCollection || [];
+
+ for (const annotation of annotations) {
+ if (annotation.subject === 'Redaction') {
+ annotation.overlayText = 'EditedAnnotation';
+ annotation.markerFillColor = '#222';
+ annotation.fontColor = '#ff0';
+ pdfViewer.annotation.editAnnotation(annotation);
+ break;
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Delete redaction annotations
+
+### Delete in UI
+- **Right‑click → Delete**
+
+- Use the **Delete** button in the toolbar
+
+- Press **Delete** key
+
+### Delete programmatically (Angular)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+deleteFirstRedaction(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ const annotations = pdfViewer.annotationCollection || [];
+ const firstRedaction = annotations.find((a: any) => a.subject === 'Redaction');
+
+ if (firstRedaction) {
+ pdfViewer.annotationModule.deleteAnnotationById(firstRedaction.annotationId);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Redact pages
+
+### Redact pages in UI
+Use the **Redact Pages** dialog to mark entire pages with options like **Current Page**, **Odd Pages Only**, **Even Pages Only**, and **Specific Pages**.
+
+
+### Add page redactions programmatically (Angular)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addPageRedactions(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addPageRedactions([1, 3, 5]);
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Apply redaction
+
+### Apply redaction in UI
+Click **Apply Redaction** to permanently remove marked content.
+
+
+
+N> **Redaction is permanent and cannot be undone.**
+
+### Apply redaction programmatically (Angular)
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+applyRedaction(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.redact();
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> Applying redaction is **irreversible**.
+
+## Default redaction settings during initialization
+
+Configure defaults with the `redactionSettings` **component property**:
+
+{% 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 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';
+
+ // Redaction annotation default settings
+ public redactionSettings = {
+ overlayText: 'Confidential',
+ markerFillColor: '#000'
+ };
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample on GitHub](https://github.com/SyncfusionExamples/typescript-pdf-viewer-examples/tree/master)
+
+## See also
+- [Annotation Overview](../overview)
+- [Redaction Overview](../../Redaction/overview)
+- [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 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/annotation-types/squiggly-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/squiggly-annotation.md
new file mode 100644
index 0000000000..686f382a0b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/squiggly-annotation.md
@@ -0,0 +1,299 @@
+---
+layout: post
+title: Squiggly Annotation (Text Markup) in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Squiggly annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Squiggly Annotation (Text Markup) in Angular PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Squiggly* text markup annotations in the Syncfusion **React PDF Viewer**.
+You can add squiggly underlines from the toolbar or context menu, programmatically invoke squiggly mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Squiggly in the Viewer
+To enable Squiggly annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and squiggly markup.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Squiggly Annotation
+
+### Add Squiggly Using the Toolbar
+
+1. Select the text you want to annotate.
+2. Click the **Squiggly** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+### Add Squiggly Using the Context Menu
+
+Right-click a selected text region → select **Squiggly**.
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Squiggly Mode
+Switch the viewer into squiggly mode using `setAnnotationMode('Squiggly')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableSquiggly(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('Squiggly');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Squiggly Mode
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+disableSquigglyMode(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Squiggly Programmatically
+Use [`addAnnotation()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) to insert a squiggly at a specific location.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addSquiggly(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Squiggly Appearance
+Configure default squiggly settings such as **color**, **opacity**, and **author** using [`squigglySettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#squigglysettings).
+
+{% 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 squigglySettings = {
+ author: 'Guest User',
+ subject: 'Corrections',
+ color: '#00ff00',
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Squiggly (Edit, Delete, Comment)
+
+### Edit Squiggly
+
+#### Edit Squiggly Appearance (UI)
+
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+#### Edit Squiggly Programmatically
+Modify an existing squiggly programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editSquigglyProgrammatically(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ for (let annot of pdfViewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Squiggly') {
+ annot.color = '#ff0000';
+ annot.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Squiggly
+The PDF Viewer supports deleting existing annotations through both the UI and API.
+For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations)
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to squiggly annotations.
+It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation‑related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Set properties for individual squiggly annotations at the time of creation using the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addMultipleSquigglies(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ // Squiggly 1
+ pdfViewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Squiggly 2
+ pdfViewer.annotation.addAnnotation('Squiggly', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including squiggly) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Squiggly Events
+The PDF viewer provides annotation life‑cycle events that notify when squiggly annotations are added, modified, selected, or removed.
+For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event)
+
+## Export and Import
+
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer.
+For full details on supported formats and steps to export or import annotations, see [**Export and Import annotations**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/stamp-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/stamp-annotation.md
new file mode 100644
index 0000000000..21fb008114
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/stamp-annotation.md
@@ -0,0 +1,249 @@
+---
+layout: post
+title: Stamp Annotation in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Stamp annotations (Dynamic, Sign Here, Standard Business, Custom) in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Stamp Annotations in Angular PDF Viewer
+Stamp annotations allow you to place predefined or custom stamps (such as **Dynamic**, **Sign Here**, **Standard Business**, or **Custom**) on a PDF to communicate review states, approvals, or instructions. You can add stamps from the toolbar, switch to specific stamp modes programmatically, customize defaults (e.g., opacity/author), edit or lock them, and export them with the document.
+
+
+
+## Enable Stamp Annotation in the Viewer
+
+To enable Stamp annotations, inject the following modules into the Angular PDF Viewer:
+
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+{% 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 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';
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Add Stamp Annotation
+
+### Add Stamp Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Choose **Stamp** to open the stamp gallery.
+
+3. Select a stamp type (**Dynamic**, **Sign Here**, **Standard Business**, or **Custom**) and click on the page to place it.
+
+
+N> When Pan mode is active and a stamp tool is chosen, the viewer automatically switches to selection mode for a smoother interaction.
+
+### Enable a Specific Stamp Mode
+Switch the viewer into a specific stamp annotation mode programmatically.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+enableDynamicStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Stamp', 'NotApproved');
+}
+
+enableSignHereStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Stamp', null, 'Witness');
+}
+
+enableStandardBusinessStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.setAnnotationMode('Stamp', null, null, 'Approved');
+}
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Stamp Mode
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+exitStampMode(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.setAnnotationMode('None');
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Add Stamp Programmatically
+Use the [`addAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) API to place stamps at specific coordinates.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+// Dynamic stamp
+addDynamicStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1 }, 'Approved');
+}
+
+// Sign Here stamp
+addSignStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 240 }, pageNumber: 1 }, undefined, 'Witness');
+}
+
+// Standard Business stamp
+addStandardBusinessStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 340 }, pageNumber: 1 }, undefined, undefined, 'Approved');
+}
+
+// Custom stamp (JPG/JPEG only)
+addCustomStamp(): void {
+ const viewer = (document.getElementById('container') as any).ej2_instances[0];
+ viewer.annotation.addAnnotation('Stamp', {
+ offset: { x: 100, y: 440 },
+ width: 100,
+ height: 46,
+ author: 'Guest',
+ isLock: true,
+ pageNumber: 1,
+ customStamps: [
+ {
+ customStampName: 'Image',
+ customStampImageSource: 'data:image/jpeg;base64,REPLACE_WITH_YOUR_BASE64_IMAGE_DATA'
+ }
+ ]
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> For **Custom Stamp** via the UI, only **JPG/JPEG** image formats are supported.
+
+## Customize Stamp Appearance
+Configure default properties using the [`stampSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#stampsettings) property (for example, default **opacity** and **author**).
+
+{% 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 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 stickyNotesSettings = { author: 'Guest User' };
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> The **Sticky Note** tool appears in the Annotation toolbar when annotation features are enabled.
+
+## Add Sticky Notes
+
+### Add Sticky Notes Using the Toolbar
+1. Open the **Annotation Toolbar**.
+2. Select the **Sticky Note** tool.
+3. Click anywhere on the page to place the note; click the note to open its popup and start commenting.
+
+
+
+N> Use the **Comments panel** to add replies or update status for the selected note.
+
+### Add Sticky Notes Programmatically
+
+Create a note at specific coordinates using `addAnnotation`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+addStickyNote(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('StickyNotes', {
+ offset: { x: 120, y: 220 },
+ pageNumber: 1,
+ isLock: false
+ });
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Sticky Note Appearance
+Configure default properties using the [`stickyNotesSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#stickyNotesSettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% 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 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';
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Move, Edit, or Delete Sticky Notes
+
+- **Move**: Drag the note icon to a new location.
+- **Edit**: Click the note icon to open the popup; edit text, add replies, or change status in the **Comments panel**.
+
+### Edit Sticky Notes Annotation
+
+#### Edit Sticky Notes (UI)
+
+- **Icon style**: Open **Right Click → Properties** on a note to choose a different note icon style (e.g., classic note icon).
+- **Color**: Change the note color using the **Edit Color** tool in the annotation toolbar.
+- **Opacity**: Adjust transparency using the **Edit Opacity** tool.
+ 
+
+N> To tailor right‑click actions (Delete, Properties, etc.), see [**Customize Context Menu**](../../context-menu/custom-context-menu).
+
+#### Edit Sticky Notes Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+editStickyProgrammatically(): void {
+ const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.subject === 'Volume calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Volume Annotation
+
+Delete Volume Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Configure scale defaults using [`stickyNotesSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#stickyNotesSettings).
+
+{% 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 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';
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Sticky Note Events
+
+Listen to annotation life-cycle events and filter for sticky notes. See [**Annotation Events**](../annotation-event) for the full list and argument details.
+
+## Export and Import
+Sticky Notes are included when exporting or importing annotations. For supported formats and workflows, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/strikethrough-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/strikethrough-annotation.md
new file mode 100644
index 0000000000..9e97e54cfe
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/strikethrough-annotation.md
@@ -0,0 +1,266 @@
+---
+layout: post
+title: Strikethrough Text in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Strikethrough annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Strikethrough Annotation (Text Markup) in Angular PDF Viewer
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Strikethrough* text markup annotations in the Syncfusion **Angular PDF Viewer**. You can apply strikethrough using the toolbar or context menu, programmatically invoke strikethrough mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Strikethrough in the Viewer
+To enable Strikethrough annotations, inject the following modules into the Angular PDF Viewer:
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and strikethrough.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Strikethrough Events
+The PDF viewer provides annotation life-cycle events that notify when strikethrough annotations are added, modified, selected, or removed. For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer. For full details on supported formats and steps to export or import annotations, see [**Export and Import Annotation**](../export-import-annotations).
+
+## See Also
+
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/underline-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/underline-annotation.md
new file mode 100644
index 0000000000..10408c1c64
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/underline-annotation.md
@@ -0,0 +1,292 @@
+---
+layout: post
+title: Underline Text in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, apply, customize, and manage Underline annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Underline Annotation (Text Markup) in Angular PDF Viewer
+
+This guide explains how to **enable**, **apply**, **customize**, and **manage** *Underline* text markup annotations in the Syncfusion **Angular PDF Viewer**. You can underline text using the toolbar or context menu, programmatically invoke underline mode, customize default settings, handle events, and export the PDF with annotations.
+
+## Enable Underline in the Viewer
+To enable Underline annotations, inject the following modules into the Angular PDF Viewer:
+- [**Annotation**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotation)
+- [**TextSelection**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#textselection)
+- [**Toolbar**](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#toolbar)
+
+This minimal setup enables UI interactions like selection and underlining.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Underline Annotation
+
+### Add Underline Using the Toolbar
+1. Select the text you want to underline.
+2. Click the **Underline** icon in the annotation toolbar.
+ - If **Pan Mode** is active, the viewer automatically switches to **Text Selection** mode.
+
+
+
+### Apply underline using Context Menu
+Right-click a selected text region → select **Underline**.
+
+
+
+To customize menu items, refer to [**Customize Context Menu**](../../context-menu/custom-context-menu) documentation.
+
+### Enable Underline Mode
+Switch the viewer into underline mode using `setAnnotationMode('Underline')`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableUnderline(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('Underline');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Underline Mode
+Switch back to normal mode using:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitUnderlineMode(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Underline Programmatically
+Use [`addAnnotation()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#addannotation) to insert an underline at a specific location.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addUnderline(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
+ pageNumber: 1
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Underline Appearance
+Configure default underline settings such as **color**, **opacity**, and **author** using [`underlineSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#underlinesettings).
+
+{% 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 underlineSettings = {
+ author: 'Guest User',
+ subject: 'Important',
+ color: '#00aa00',
+ opacity: 0.9
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Underline (Edit, Delete, Comment)
+
+### Edit Underline
+
+#### Edit Underline Appearance (UI)
+Use the annotation toolbar:
+- **Edit Color** tool
+
+- **Edit Opacity** slider
+
+
+#### Edit Underline Programmatically
+Modify an existing underline programmatically using `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editUnderlineProgrammatically(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ for (let annot of pdfViewer.annotationCollection) {
+ if (annot.textMarkupAnnotationType === 'Underline') {
+ annot.color = '#0000ff';
+ annot.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(annot);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Underline
+The PDF Viewer supports deleting existing annotations through both the UI and API. For detailed behavior, supported deletion workflows, and API reference, see [**Delete Annotation**](../remove-annotations).
+
+### Comments
+Use the [**Comments panel**](../comments) to add, view, and reply to threaded discussions linked to underline annotations. It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation–related notes within the PDF Viewer.
+
+## Set properties while adding Individual Annotation
+Set properties for individual annotations when adding them programmatically by supplying fields on each `addAnnotation('Underline', …)` call.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addMultipleUnderlines(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ // Underline 1
+ pdfViewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
+ pageNumber: 1,
+ author: 'User 1',
+ color: '#ffff00',
+ opacity: 0.9
+ });
+ // Underline 2
+ pdfViewer.annotation.addAnnotation('Underline', {
+ bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
+ pageNumber: 1,
+ author: 'User 2',
+ color: '#ff1010',
+ opacity: 0.9
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Disable TextMarkup Annotation
+Disable text markup annotations (including underline) using the [`enableTextMarkupAnnotation`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enabletextmarkupannotation) property.
+
+{% 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Underline Events
+The PDF viewer provides annotation life-cycle events that notify when underline annotations are added, modified, selected, or removed. For the full list of available events and their descriptions, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+The PDF Viewer supports exporting and importing annotations, allowing you to save annotations as a separate file or load existing annotations back into the viewer. For full details on supported formats and steps to export or import annotations, see [**Export and Import Annotation**](../export-import-annotations)
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/volume-annotation.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/volume-annotation.md
new file mode 100644
index 0000000000..31e84a4122
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotation-types/volume-annotation.md
@@ -0,0 +1,340 @@
+---
+layout: post
+title: Add Volume Measurement Annotations in Angular PDF Viewer | Syncfusion
+description: Learn how to enable, draw, customize, and manage Volume measurement annotations in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Add Volume Measurement Annotations in Angular PDF Viewer
+Volume measurement annotations allow users to draw circular regions and calculate the volume visually.
+
+
+
+## Enable Volume Measurement
+Inject the **Annotation** and **Toolbar** modules to enable volume annotation tools.
+
+{% 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 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';
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Add Volume Annotation
+
+### Draw Volume Using the Toolbar
+
+1. Open the **Annotation Toolbar**.
+2. Select **Measurement → Volume**.
+3. Click and drag on the page to draw the volume.
+
+
+
+> If Pan mode is active, selecting the Volume tool automatically switches interaction mode.
+
+### Enable Volume Mode
+Programmatically switch the viewer into Volume mode.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+enableVolumeMode(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('Volume');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+#### Exit Volume Mode
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+exitVolumeMode(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.setAnnotationMode('None');
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Add Volume Programmatically
+Configure default properties using the [`Volume Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#volumesettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addVolume(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Volume', {
+ offset: { x: 200, y: 810 },
+ pageNumber: 1,
+ width: 90,
+ height: 90
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Customize Volume Appearance
+Configure default properties using the [`Volume Settings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#volumesettings) property (for example, default **fill color**, **stroke color**, **opacity**).
+
+{% 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 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 volumeSettings = {
+ fillColor: 'yellow',
+ strokeColor: 'orange',
+ opacity: 0.6
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Manage Volume (Move, Resize, Delete)
+- **Move**: Drag inside the polygon to reposition it.
+- **Reshape**: Drag any vertex handle to adjust points and shape.
+
+### Edit Volume Annotation
+
+#### Edit Volume (UI)
+
+- Edit the **fill color** using the Edit Color tool.
+ 
+- Edit the **stroke color** using the Edit Stroke Color tool.
+ 
+- Edit the **border thickness** using the Edit Thickness tool.
+ 
+- Edit the **opacity** using the Edit Opacity tool.
+ 
+- Open **Right Click → Properties** for additional line‑based options.
+ 
+
+#### Edit Volume Programmatically
+Update properties and call `editAnnotation()`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+editVolumeProgrammatically(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ for (const ann of pdfViewer.annotationCollection) {
+ if (ann.subject === 'Volume calculation') {
+ ann.strokeColor = '#0000FF';
+ ann.thickness = 2;
+ ann.opacity = 0.8;
+ pdfViewer.annotation.editAnnotation(ann);
+ break;
+ }
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+### Delete Volume Annotation
+
+Delete Volume Annotation via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see [**Delete Annotation**](../remove-annotations).
+
+## Set Default Properties During Initialization
+Apply defaults for Volume using the [`volumeSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#volumesettings) property.
+
+{% 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 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 volumeSettings = {
+ fillColor: 'yellow',
+ opacity: 0.6,
+ strokeColor: 'yellow'
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Set Properties While Adding Individual Annotation
+Apply defaults for Area using the [`volumeSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#volumesettings) property.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+addStyledVolume(): void {
+ const pdfViewer = (document.getElementById('container') as any).ej2_instances[0];
+ pdfViewer.annotation.addAnnotation('Volume', {
+ offset: { x: 200, y: 810 },
+ pageNumber: 1,
+ width: 90,
+ height: 90,
+ fillColor: 'yellow',
+ opacity: 0.6,
+ strokeColor: 'yellow'
+ });
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Scale Ratio & Units
+- Use **Scale Ratio** from the context menu.
+ 
+- Supported units: Inch, Millimeter, Centimeter, Point, Pica, Feet.
+ 
+
+### Set Default Scale Ratio During Initialization
+Configure scale defaults using [`measurementSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#mesaurementsettings).
+
+{% 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 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 measurementSettings = {
+ scaleRatio: 2,
+ conversionUnit: 'cm',
+ displayUnit: 'cm'
+ };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Handle Volume Events
+Listen to annotation life-cycle events (add/modify/select/remove). For the full list and parameters, see [**Annotation Events**](../annotation-event).
+
+## Export and Import
+Volume measurements can be exported or imported with other annotations. For workflows and supported formats, see [**Export and Import annotations**](../export-import-annotations).
+
+## See Also
+- [Annotation Toolbar](../../toolbar-customization/annotation-toolbar)
+- [Customize Context Menu](../../context-menu/custom-context-menu)
+- [Comments Panel](../comments)
+- [Annotation Events](../annotation-event)
+- [Export and Import annotations](../export-import-annotations)
+- [Delete Annotations](../remove-annotations)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotations-api.md b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotations-api.md
new file mode 100644
index 0000000000..addfac3cf2
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/annotation/annotations-api.md
@@ -0,0 +1,3053 @@
+---
+layout: post
+title: Annotations API in Angular PDF Viewer | Syncfusion
+description: Learn here all about how to read and configure annotations using APIs in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Annotations API in Angular
+
+The PDF Viewer provides APIs to read the loaded annotations and to configure global defaults for creating/editing annotations.
+
+| API | Description |
+|---|---|
+| [annotationCollection](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationcollection) | Gets the loaded document annotation collection. |
+| [annotationDrawingOptions](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationdrawingoptions) | Options to configure line-type annotation drawing behavior. |
+| [annotationSelectorSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationselectorsettings) | Configures the annotation selector (selection UI). |
+| [annotationSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#annotationsettings) | Global defaults for all annotations. |
+| [areaSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#areasettings) | Defaults for Area annotations. |
+| [arrowSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#arrowsettings) | Defaults for Arrow annotations. |
+| [circleSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#circlesettings) | Defaults for Circle annotations. |
+| [customStamp](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#customstamp) | Defines custom stamp items. |
+| [customStampSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#customstampsettings) | Defaults for Custom Stamp annotations. |
+| [distanceSettings](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#distancesettings) | Defaults for Distance annotations. |
+
+## annotationCollection
+Read the loaded document annotation collection from the viewer instance.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+ ],
+ 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.1.23/dist/ej2-pdfviewer-lib';
+
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any)
+ ?.ej2_instances?.[0];
+ }
+
+ logAnnotations(): void {
+ const viewer = this.getViewer();
+ if (viewer) {
+ console.log(viewer.annotationCollection);
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+---
+
+## annotationDrawingOptions
+Configure line-type annotation drawing behavior.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+ ],
+ 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 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]);
+ }
+ }
-Edit comments and replies in the following ways:
+ 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]);
+ }
+ }
+}
-1. Using the Context menu
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+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 resource: string =
+ 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ 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]);
+ }
+ }
-### Delete Comment or Comment Replies
+ 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]);
+ }
+ }
+}
-* Select the annotation comment in the comment panel.
-* Click More options in the comment or reply container.
-* Select Delete from the context menu.
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+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
-
-
-
+
+
+
+
+
+ `,
+ 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
-
-
-
+
+
+
+
+ `,
+ 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';
+
+ // Text markup settings
+ public highlightSettings = { author: 'QA', subject: 'Review', color: '#ffff00', opacity: 0.6, customData: { tag: 'needs-review', priority: 'high' } };
+ public strikethroughSettings = { author: 'QA', subject: 'Remove', color: '#ff0000', opacity: 0.6, customData: { tag: 'remove', priority: 'medium' } };
+ public underlineSettings = { author: 'Guest User', subject: 'Notes', color: '#00ffff', opacity: 0.9, customData: { tag: 'note', owner: 'guest' } };
+ public squigglySettings = { author: 'Guest User', subject: 'Corrections', color: '#00ff00', opacity: 0.9, customData: { tag: 'typo' } };
+
+ // Shape settings
+ public lineSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, customData: { id: 'ln-1', category: 'connector' } };
+ public arrowSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, customData: { id: 'ar-1', category: 'direction' } };
+ public rectangleSettings = { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, customData: { id: 'rect-1', zone: 'content' } };
+ public circleSettings = { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, customData: { id: 'circ-1', zone: 'highlight' } };
+ public polygonSettings = { fillColor: '#ffffff00', strokeColor: '#222222', thickness: 1, opacity: 1, customData: { id: 'poly-1', group: 'area' } };
+
+ // Measurement settings
+ public distanceSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, customData: { units: 'cm', scale: 1 } };
+ public perimeterSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, customData: { units: 'cm', calc: 'perimeter' } };
+ public areaSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', customData: { units: 'cm^2', calc: 'area' } };
+ public radiusSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', customData: { units: 'cm', calc: 'radius' } };
+ public volumeSettings = { strokeColor: '#0066ff', thickness: 2, opacity: 0.8, fillColor: '#ffffff00', customData: { units: 'cm^3', calc: 'volume' } };
+
+ // Other annotation settings
+ public freeTextSettings = { borderColor: '#222222', opacity: 1, customData: { template: 'comment', mentions: ['qa'] } };
+ public inkAnnotationSettings = { strokeColor: '#0000ff', thickness: 3, opacity: 0.8, customData: { tool: 'pen', userId: 12345 } };
+ public stampSettings = { opacity: 0.9, customData: { stampType: 'Approved', by: 'Manager' } };
+ public stickyNotesSettings = { author: 'QA', subject: 'Review', opacity: 1, customData: { channel: 'inbox', unread: true } };
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+## Retrieve custom data at runtime
+
+You can access the customData for any annotation through the viewer's annotationCollection. For example, wire a button click to iterate all annotations and read their custom payloads.
+
+{% 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,
+ 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
-
-
-
-```
-
-```typescript
-import { Component, ViewEncapsulation, OnInit,ViewChild} from '@angular/core';
-import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService, PageOrganizerService,PdfViewerModule, TextSelectionStartEventArgs, AnnotationSelectEventArgs } from '@syncfusion/ej2-angular-pdfviewer';
-import { SwitchComponent, SwitchModule } from '@syncfusion/ej2-angular-buttons';
-import { ClickEventArgs } from '@syncfusion/ej2-buttons';
-
-
-/**
-* Default PdfViewer Controller
-*/
+
+Set the `enableLineAngleConstraints` property within `annotationDrawingOptions` to enable angle snapping for supported line-type annotations.
+
+The following code demonstrates enabling line angle constraints:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ AnnotationService,
+ TextSelectionService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
@Component({
- selector: 'app-root',
- templateUrl: 'app.html',
- encapsulation: ViewEncapsulation.None,
- // tslint:disable-next-line:max-line-length
- providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, TextSelectionService, PrintService, AnnotationService, FormFieldsService, FormDesignerService,PageOrganizerService],
- styleUrls: ['app.css'],
- standalone: true,
- imports: [
-
- SwitchModule,
- PdfViewerModule,
-
- ],
+ selector: 'app-root',
+ template: `
+
-
-
+
+ `,
+ 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';
+
+ /** Switch to Handwritten Signature annotation mode */
+ handWrittenSignature(): void {
+ const viewer = (document.getElementById('pdfViewer') as any)
+ ?.ej2_instances?.[0];
+
+ if (viewer) {
+ viewer.annotation.setAnnotationMode('HandWrittenSignature');
+ }
+ }
+}
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+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 serviceUrl: string =
+ 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+
+ /** Switch to Handwritten Signature annotation mode */
+ handWrittenSignature(): void {
+ const viewer = (document.getElementById('pdfViewer') as any)
+ ?.ej2_instances?.[0];
+
+ if (viewer) {
+ viewer.annotation.setAnnotationMode('HandWrittenSignature');
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Add a handwritten signature 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.
+
+Here is an example of adding a handwritten signature programmatically using the `addAnnotation()` method:
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -78,7 +233,7 @@ export class AppComponent implements OnInit {
displayMode: DisplayMode.Draw
},
canSave: true,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
+ path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781}]'
} as HandWrittenSignatureSettings );
pdfviewer.annotation.addAnnotation("HandWrittenSignature", {
offset: { x: 200, y: 310 },
@@ -103,7 +258,7 @@ export class AppComponent implements OnInit {
displayMode: DisplayMode.Upload, hideSaveSignature: false
},
canSave: true,
- path: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z"
+ path: "data:image/jpeg;base64,/9j/4AAQSkZ..."
} as HandWrittenSignatureSettings );
}
}
@@ -151,7 +306,7 @@ export class AppComponent implements OnInit {
displayMode: DisplayMode.Draw
},
canSave: true,
- path: '[{\"command\":\"M\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":244.83334350585938,\"y\":982.0000305175781},{\"command\":\"L\",\"x\":250.83334350585938,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":257.5,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":926.6667175292969},{\"command\":\"L\",\"x\":259.5,\"y\":924.0000305175781},{\"command\":\"L\",\"x\":259.5,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":258.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":258.16668701171875,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.8333435058594,\"y\":922.0000305175781},{\"command\":\"L\",\"x\":256.16668701171875,\"y\":922.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":254.16668701171875,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":253.5,\"y\":923.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":925.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":927.3333435058594},{\"command\":\"L\",\"x\":252.83334350585938,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":253.5,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":254.83334350585938,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":260.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":264.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":274.16668701171875,\"y\":958.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":281.5,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":285.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":967.3333435058594},{\"command\":\"L\",\"x\":286.8333740234375,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":282.8333740234375,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":278.16668701171875,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":266.16668701171875,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":259.5,\"y\":993.3333435058594},{\"command\":\"L\",\"x\":252.16668701171875,\"y\":994.0000305175781},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":991.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":228.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":228.83334350585938,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":230.16668701171875,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":236.16668701171875,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":240.83334350585938,\"y\":971.3333435058594},{\"command\":\"L\",\"x\":246.16668701171875,\"y\":972.0000305175781},{\"command\":\"L\",\"x\":257.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":262.8333435058594,\"y\":976.0000305175781},{\"command\":\"L\",\"x\":269.5,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":276.16668701171875,\"y\":978.6667175292969},{\"command\":\"L\",\"x\":279.5,\"y\":978.0000305175781},{\"command\":\"L\",\"x\":285.5,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":288.16668701171875,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":293.5,\"y\":966.6667175292969},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":293.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":291.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":291.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":292.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":292.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":294.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":295.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":297.5,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":298.8333740234375,\"y\":970.6667175292969},{\"command\":\"L\",\"x\":301.5,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":304.16668701171875,\"y\":968.6667175292969},{\"command\":\"L\",\"x\":305.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":308.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":310.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":310.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":311.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":312.8333740234375,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":968.0000305175781},{\"command\":\"L\",\"x\":317.5,\"y\":972.6667175292969},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":983.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":986.0000305175781},{\"command\":\"L\",\"x\":319.5,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.8333740234375,\"y\":988.0000305175781},{\"command\":\"L\",\"x\":318.16668701171875,\"y\":988.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":987.3333435058594},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":985.3333435058594},{\"command\":\"L\",\"x\":314.16668701171875,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":314.8333740234375,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":316.16668701171875,\"y\":969.3333435058594},{\"command\":\"L\",\"x\":319.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":320.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":321.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":322.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":322.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":324.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":326.8333740234375,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":328.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":328.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":329.5,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.6667175292969},{\"command\":\"L\",\"x\":330.16668701171875,\"y\":962.0000305175781},{\"command\":\"L\",\"x\":330.8333740234375,\"y\":960.0000305175781},{\"command\":\"L\",\"x\":331.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":332.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":333.5,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":334.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":335.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":336.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":337.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":338.8333740234375,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":340.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":341.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":342.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":344.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":346.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":349.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":350.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":351.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":352.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":354.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":354.16668701171875,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":355.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":356.16668701171875,\"y\":957.3333435058594},{\"command\":\"L\",\"x\":358.16668701171875,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":360.16668701171875,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":364.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":370.8333740234375,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":931.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":376.16668701171875,\"y\":930.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":932.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":375.5,\"y\":966.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":974.6667175292969},{\"command\":\"L\",\"x\":378.16668701171875,\"y\":977.3333435058594},{\"command\":\"L\",\"x\":380.8333740234375,\"y\":981.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":383.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":387.5,\"y\":982.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":980.6667175292969},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":976.6667175292969},{\"command\":\"L\",\"x\":392.8333740234375,\"y\":973.3333435058594},{\"command\":\"L\",\"x\":392.16668701171875,\"y\":970.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":385.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":382.8333740234375,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":377.5,\"y\":964.0000305175781},{\"command\":\"L\",\"x\":375.5,\"y\":964.6667175292969},{\"command\":\"L\",\"x\":373.5,\"y\":965.3333435058594},{\"command\":\"L\",\"x\":374.8333740234375,\"y\":963.3333435058594},{\"command\":\"L\",\"x\":376.8333740234375,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":382.16668701171875,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":384.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":387.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":388.16668701171875,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":388.8333740234375,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":389.5,\"y\":959.3333435058594},{\"command\":\"L\",\"x\":389.5,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":390.16668701171875,\"y\":961.3333435058594},{\"command\":\"L\",\"x\":390.8333740234375,\"y\":960.6667175292969},{\"command\":\"L\",\"x\":393.5,\"y\":958.0000305175781},{\"command\":\"L\",\"x\":396.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":398.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":400.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":400.8333740234375,\"y\":947.3333435058594},{\"command\":\"L\",\"x\":401.5,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":402.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":403.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":404.8333740234375,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":406.16668701171875,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":407.5,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":410.16668701171875,\"y\":952.0000305175781},{\"command\":\"L\",\"x\":412.16668701171875,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":940.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":414.16668701171875,\"y\":938.0000305175781},{\"command\":\"L\",\"x\":415.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":418.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":420.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":946.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":423.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":423.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":421.5,\"y\":955.3333435058594},{\"command\":\"L\",\"x\":421.5,\"y\":956.0000305175781},{\"command\":\"L\",\"x\":422.16668701171875,\"y\":954.6667175292969},{\"command\":\"L\",\"x\":422.8333740234375,\"y\":954.0000305175781},{\"command\":\"L\",\"x\":424.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":425.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":428.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":948.0000305175781},{\"command\":\"L\",\"x\":428.8333740234375,\"y\":950.0000305175781},{\"command\":\"L\",\"x\":429.5,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":430.16668701171875,\"y\":953.3333435058594},{\"command\":\"L\",\"x\":432.8333740234375,\"y\":952.6667175292969},{\"command\":\"L\",\"x\":434.8333740234375,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":437.5,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":440.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":441.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":442.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":442.8333740234375,\"y\":946.0000305175781},{\"command\":\"L\",\"x\":443.5,\"y\":949.3333435058594},{\"command\":\"L\",\"x\":444.16668701171875,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":447.5,\"y\":950.6667175292969},{\"command\":\"L\",\"x\":450.16668701171875,\"y\":948.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":945.3333435058594},{\"command\":\"L\",\"x\":453.5,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":452.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":450.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":448.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":447.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":445.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":445.5,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.16668701171875,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":446.8333740234375,\"y\":939.3333435058594},{\"command\":\"L\",\"x\":452.16668701171875,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":454.8333740234375,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":456.8333740234375,\"y\":936.0000305175781},{\"command\":\"L\",\"x\":459.5,\"y\":936.6667175292969},{\"command\":\"L\",\"x\":460.8333740234375,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":461.5,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":942.6667175292969},{\"command\":\"L\",\"x\":462.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":462.8333740234375,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":464.16668701171875,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":465.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":466.16668701171875,\"y\":932.6667175292969},{\"command\":\"L\",\"x\":467.5,\"y\":933.3333435058594},{\"command\":\"L\",\"x\":469.5,\"y\":935.3333435058594},{\"command\":\"L\",\"x\":470.16668701171875,\"y\":938.6667175292969},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":943.3333435058594},{\"command\":\"L\",\"x\":472.8333740234375,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":474.16668701171875,\"y\":944.6667175292969},{\"command\":\"L\",\"x\":475.5,\"y\":944.0000305175781},{\"command\":\"L\",\"x\":478.16668701171875,\"y\":941.3333435058594},{\"command\":\"L\",\"x\":481.5,\"y\":937.3333435058594},{\"command\":\"L\",\"x\":484.8333740234375,\"y\":934.0000305175781},{\"command\":\"L\",\"x\":488.8333740234375,\"y\":929.3333435058594},{\"command\":\"L\",\"x\":489.5,\"y\":928.0000305175781}]'
+ path: '[{\"command\":\"M\",\"x\...}]'
} as HandWrittenSignatureSettings );
pdfviewer.annotation.addAnnotation("Initial", {
offset: { x: 200, y: 310 },
@@ -176,7 +331,7 @@ export class AppComponent implements OnInit {
displayMode: DisplayMode.Upload, hideSaveSignature: false
},
canSave: true,
- path: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAIIAqwMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABQYBAwQHAv/EAEEQAAEDAwIEAwYDBAYLAAAAAAECAwQABREGIRIxQVETYXEHFCIygZEVQmIjUnKCJCUzU6HRFhc1c5KisbKzwvD/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APcaUpQKUpQKUpQKUpQKUpQKVzXGdFtsN2ZPfbYjNJ4nHHDgJFfEK5Q5ttbuUaQhcNxvxUPcklPfflQdlYJxURpe/salthuMNpxEYvuNtKc28VKVcPGB2JB577Vyz7pNuUxy26eWlCml8Mu4OI4kR/0oB2Wvp2T17EJK43qDbloakOqL7m6I7TanHVjOMhCQTjzxgVut89i4Mqdj8Y4VlC0OIKFIUOYKTuOn0INRZZtWkrVLuDpIIHHJlPK4nX1dOJR5kk4A5DYDArVoWbHuVgTPjvF5Ul5xx5zhIBc4jkJyBlI+UHqE0FjpSlApSlApSlApSlApSlApSlApSlArClAczgVmqr7QZLptkezxHi1KvD4ihxKsFprBU6v6IB+pFBTdUKf1uUuFa0WpyUIVoYBx706chchXdKEhZSPLNXXVTsOw6NdjNxkvJS0iLEidHnDhLaPME4z5ZzVHk6kTHu1vTpyE1Jf8L3Oww1ZDaGc4XJXjklXDhP6UlWd63ybrL1rq1mNa1hLcAKEeQgcTbbvyuScHnw5KGweZJPIVRYoDT6okfSlnfWhmCwlu43FGAUKxu2j9atyT+UHvirZBixLZBaiQ2kR4zCMIQnZKRWuz2yLZ7czBgo4GWh13KidypR6qJJJPevOvaFqCXqC4HSGmzxlxQbmvJJAPXwwe2M8R9R3FQc1xde9qOqEW+C44jTFuVxPvtnHvCvI+e4HYZPavV4sdmLGajxmktMtJCENpGAkDkBUbpixRNO2dm3Q0/Cj4lrPNazzUf/uWKlkkEZByKDNKUoFKUoFKUoFKUoFKwahZ2p7dFfMZhTs+ZnHu0FHirB/VjZHqogUE3WOIYzUApzUlwBKUxLOwQCFL/bv467DCEn6qr5i6btk5ht+ZOlXlCxlLkiTxtr8whGG8fy0HdK1FZorymHbjH8dPNlC+NY/lTk1XNTe0m12SCXBFnrkOpX7uh6ItkKUBzPGEnhzjcA1bokKLAZS1BjMx20jAQy2EjHoK85i6PuOovaFNv+pWPDt8J/ggMKUCXktq+BX8HNXmT2G9HLF1trSyW2GrUFgbluT3eCIRIS26tS/iSjwgCcDl35Z3qBlSb/edVcN58e4tojKafiW2MfDQpRBXF8X5UnZPGsq5ZAr0TV2j52oL9Anx7wqCxHYWypLbeXAFH4lNqz8KiNs8x0qy2e1QrNbmYFuZDUdkYSkHOT1JPUk7k0HhsG6u3SHPeisLFwnucE95hOPdmc8DUNhR/OrCR5Ak9NvX9F6cRp20IZIR706AX1I5DA2Qn9KRsPvzJqGmXG0N6pfk3KTEhW2ykBsLKUh2Y4nKlY6lKCAOuVmuafry5T5rFs0vaHQ5JSVIm3FBaQhvq7wfNwjurAPnQZ9pms1WtlVmtDqRcnxwrdK+ERknqT0Vj7DftUN7OA1BilywWx65TnU8PjOAtMsJJzlbhBypXMhPFgADbrF6B0sNSagkzrk+5cbTDeUQ5IHwy3T+bHbYE/y9yK9sabQ02lDSAhCRhKUjAAoIaFaZ8gh++zg8vIKYsUFphB+/Ev8AmONuVTYGBgcqzSoFKUoFKUoFKUoFcV4mOW+2yJbEN6Y40gqTHYGVuHsK7awRmg8rd/1gameJn2n8Ptv5YQn+78f+8cSFLI57AJ8/Oy2eyalhxkRo79htEVI2YgQ1uEH+JSgD68NW/FQ2r7yqxWCTNZR4knZqM1/ePLPChP3IoKRc4l91FqJ3TkfUst2Aygfiz7TDTaEA8mkEAnjPXfAH2NohaPehR2Y8bVF9QwygNttJMcJSkDAAAZru0hY02CyMxFK8SWv9rMfPN55W6lE9d9vQCpughmrLNZVxI1Fc19kupYUn/wAYP+NdQVMjD+khEhsfM40nhUPMp3z9D9K76xQRN/uNxjWj3qwW9F0krKfDa8YISUn83F25VVocf2kXdR/EJlrskZQxiM14ryR5ZJA9c/SrHo973m2SFjPhCfKSzn9wPLCceXbyxUpPmRrdDemTHUMx2UFbjizgJAoPGrbpyJBRPvEi53STfhc34MRCVMrckLSvCT8aFEEjBUQdhUlfbHcrcItuYvc+VqbUBDcpf7PgDSfnJPBxBCQcDBGcnlUn7Om4kly+aonhbPBPkeGiRsIqCEqUcHkSMZ9K5bRqqMbjJ1E5FkTrndFe72m2sAF1MVBI4iD8iVKyoqO2w7VRbrJpRdkt7MGDe56GGhgJ8Njn1P8AZ9fPNd5gXNKQEXt0q7uRmz/0AqFja29znGFq2EmxuqaLzDrkhK2XUj5gF7YUNvhqsX+66nvtqlarsrsmDa7aUvQIqQULuCUqHiLdGPk4c8I686g9BMK8/lu7IxyzCB/9q4bpJkWeP7xd9TQojGeHjdipRk9hlW5/yrF21raoEGM/HcM+TMSDEhwyFuv55YA5DfcnYVx2fTD9wm/jeskMS7goYYhY42IKeyQeajtlR68tqCUjtXWVHakQL/FejupC23PcwsLSeoKVgEVsLWomsFMm1yAM5C2HGir6hSsfY1B6ILViuV50utSWkRpHvNvQTgGO6OLCe/CviB7bVMXjVMC2vCG0VTrk4MtQIeHHleZHJCf1KwKDTcNSqskB2XqSCYjTQ3fYcDzSj0SOSgSdhlP1r50FqherbM5cVQVQwmQtkNlfFxBON8/XB8wa4JNsfUzJ1Jq/wXFQWnH4tvbPEzFCUk8RyPjd2+bkOQ7nHs0iSLRY7dBkKUoy4gnYV8yHFEFxPoCtOPU+VBdaUpQKUpQKqF4H4xry027YxrYyq4yB3cPwND/vV9BVvNVTRf8ATrhqC9KIUJU4x2T2aZHAB/xcZ+tBa6UpQKr+r7lIjRWrdaz/AFrcleBF2z4W3xOq8kDf1wOtSV5ukSz216fOc4GGhk4GSo9EpHVROwHU1DaWtst2S9qG+N8Nzlp4WWSc+6R85S0P1dVHqfSgm7Rb2bTbItvjcXhR2g2kqOVKx1J6k8zVbfP+leoSxkGx2h7LxztJlD8h6FCOZ/VjtXdq25ymWY9ptSv61uSi2yr+4Rj43T5JHLzIrRfHIujtCy/dthFiqQyD8zrqhgZ7qUo/40FJsbL2q7W/YYchUdqdMlXC5SEDJQhbq/CbHTKuEEj90edXfRWi4Gk4yvAUqTMdADsp35ikckj91I7Vn2e6bTpnTUaG5hUtweLJcHVw9PQch6VZ6Dhudot12aQ1dIEWa2hXEhEllLgSe4Cga7OBPBwYHDjGMbYr6pQRNp03ZrM669arVChuu/OphkJJ8tunlUt0pSgjLxYLVew2LtAYleEctqcT8SPRXMfevq0WO12VtTdpgRoiVHKy02AVnuo8z9akaUEBr2O9L0beI8dtx1xyMpIQ2kqUodQANycZrk07JVeLyq4R2HmrZCiiJFW62UF9SilS1AHfhHAgA7b8XlVqIzWMb0GaUpQKUpQc9wkCJAkyVcmWlOH6AmoL2bsqZ0LZi4SXHowfcUeZU58ZP3VUpqNlcjT1zYaGVuRHUJA6koIFcuiZDcnR9lea+RcFkgdvgG1BN1omS48GM7JluoZYaSVuOLOEpSOZJrXdLjEtUF2bcJLceM0MrccOAP8AP0qqR4czWk1qfd2HItgZWFxLe6MLlKHJ14dE9kH1NBttDEjVVzYvtxaUza4547ZCdThSz0kLHQ4+UdAc86tcmQzDjOyJLiW2WUFxxxWwSkDJJ+lbQAOVVPU6vx29xdLsqPgBKZdzIG3ghWEtE9CtX/Kk0GzSTDlwekamnNlL08BMNCs5ZijdAweRVniPqB0qsarce1XrezWlghVsiTCp3B/tFtDicPok8CP4lq7VedSzXYFr8OBwpmyVCPEyPhStQPxEfupAKj5JNVz2eW9t2RIvLJWqGlsQbetXN1pCsuPerjmVZ6gCqLyBis0pUClKUClKUClKUClKUClKUClKUGCMjFVNqw36yeOxpmbb/wAPdcU43GntLPuqlHJCFJO6ckkJI2zzq20oKtE0iZE5q46mnKu8to8TLSmwiMwe6G99/wBSiTVoGwrNcV4uUez2yTcJiiGY7ZWrAyT2AHUk7D1oMXq6R7PapNxlk+FHQVkAZKj0SB1JOAPWozRtqfhW5ybcf9qXJz3qZk54FEbNg9kDCfoT1qGi++alvEGJdGwlq2hE+e0FApTKVu0we4Qk8R7nhNXkcqCs6q0zK1DcIWbkqNbW23ESmWk4ceCsZAV+UEAgnngnvViix2okZqPHbS2y0kIbQkYCUjYAVtpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKUpQKouv7mwi7W2HJBdZiJNxXHSd5DoUER2gOpU4rI/gq9VxO2i3PXRu6OwmFz2m/DbkKQCtKck4B+p+9BxaTtblqtQEvhM+UtUqatO4U8vdW/YbJHkkVNVgDFZoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoFKUoP//Z"
+ path: "data:image/jpeg;base64,/9j/4AAQSkZJRgAB..."
} as HandWrittenSignatureSettings );
}
}
@@ -185,8 +340,392 @@ export class AppComponent implements OnInit {
[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to/Add%20Handwritten%20Signature%20Programmatically)
-## Editing the properties of handwritten signature
+## Edit signature annotation
+
+### Edit signature annotation in UI
+
+Stroke color, border thickness, and opacity can be edited using the Edit Stroke Color, Edit Thickness, and Edit Opacity tools in the annotation toolbar.
+
+#### Edit stroke color
+
+Edit the stroke color using the color palette in the Edit Stroke Color tool.
+
+
+
+#### Edit thickness
+
+Edit border thickness using the range slider in the Edit Thickness tool.
+
+
+
+#### Edit opacity
+
+Edit opacity using the range slider in the Edit Opacity tool.
+
+
+
+### Edit Signature Annotation Programmatically
+
+With the PDF Viewer library, you can programmatically edit a handwritten signature in the PDF Viewer control using the `editSignature()` method.
+
+Here is an example of editing a handwritten signature programmatically using the `editSignature()` method:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+import { DisplayMode } from '@syncfusion/ej2-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+ ],
+ template: `
+
+
+
+
+ `
+})
+export class AppComponent {
+
+ public documentPath: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ /** Get PDF Viewer instance */
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any)
+ ?.ej2_instances?.[0];
+ }
+
+ /** Add Handwritten Signature (Text mode) */
+ addSignature(): void {
+ const viewer = this.getViewer();
+ if (!viewer) { return; }
+
+ viewer.annotation.addAnnotation('HandWrittenSignature', {
+ offset: { x: 200, y: 310 },
+ pageNumber: 1,
+ width: 200,
+ height: 65,
+ signatureItem: ['Signature'],
+ signatureDialogSettings: {
+ displayMode: DisplayMode.Text,
+ hideSaveSignature: false
+ },
+ canSave: false,
+ path: 'Syncfusion',
+ fontFamily: 'Helvetica'
+ });
+ }
+
+ /** Edit existing Signature annotation */
+ editSignature(): void {
+ const viewer = this.getViewer();
+ if (!viewer || !viewer.signatureCollection) { return; }
+
+ for (const signature of viewer.signatureCollection) {
+ if (signature.shapeAnnotationType === 'SignatureText') {
+ signature.fontSize = 12;
+ signature.thickness = 2;
+ signature.strokeColor = '#0000FF';
+ signature.opacity = 0.8;
+
+ viewer.annotationModule.editSignature(signature);
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+import { DisplayMode } from '@syncfusion/ej2-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ LinkAnnotationService,
+ ThumbnailViewService,
+ BookmarkViewService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService
+ ],
+ template: `
+
+
+
+
+
+
+
+ `
+})
+export class AppComponent {
+
+ public documentPath: string =
+ 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+
+ public serviceUrl: string =
+ 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+
+ /** Get PDF Viewer instance */
+ private getViewer(): any {
+ return (document.getElementById('pdfViewer') as any)
+ ?.ej2_instances?.[0];
+ }
+
+ /** Add Handwritten Signature (Text mode) */
+ addSignature(): void {
+ const viewer = this.getViewer();
+ if (!viewer) { return; }
+
+ viewer.annotation.addAnnotation('HandWrittenSignature', {
+ offset: { x: 200, y: 310 },
+ pageNumber: 1,
+ width: 200,
+ height: 65,
+ signatureItem: ['Signature'],
+ signatureDialogSettings: {
+ displayMode: DisplayMode.Text,
+ hideSaveSignature: false
+ },
+ canSave: false,
+ path: 'Syncfusion',
+ fontFamily: 'Helvetica'
+ });
+ }
+
+ /** Edit existing Signature annotation */
+ editSignature(): void {
+ const viewer = this.getViewer();
+ if (!viewer || !viewer.signatureCollection) { return; }
+
+ for (const signature of viewer.signatureCollection) {
+ if (signature.shapeAnnotationType === 'SignatureText') {
+ signature.fontSize = 12;
+ signature.thickness = 2;
+ signature.strokeColor = '#0000FF';
+ signature.opacity = 0.8;
+
+ viewer.annotationModule.editSignature(signature);
+ }
+ }
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## Enable or disable handwritten signature
+
+The following example enables or disables the handwritten signature in the PDF Viewer. Setting the value to `false` disables the feature.
+
+{% 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 serviceUrl: string =
+ 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+}
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+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
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md
new file mode 100644
index 0000000000..5190eedcda
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/add-digital-signature.md
@@ -0,0 +1,102 @@
+---
+layout: post
+title: Add Digital Signature to PDF in Angular PDF Viewer | Syncfusion
+description: Learn how to add signature fields and apply PKI-based digital signatures using Syncfusion Angular PDF Viewer and JavaScript PDF Library.
+platform: document-processing
+control: PdfViewer
+documentation: ug
+---
+
+# Add Digital Signature to PDF in Angular
+
+This section explains how to **add signature fields** using the Syncfusion **Angular PDF Viewer** and how to apply **digital (PKI) signatures** using the **JavaScript PDF Library**.
+
+N> As instructed by team leads — use the **Angular PDF Viewer only to add & place signature fields**. Use the **JavaScript PDF Library** to apply the *actual cryptographic digital signature*.
+
+## Overview (Explanation)
+
+A **digital signature** provides:
+- **Authenticity** – confirms the signer’s identity.
+- **Integrity** – detects modification after signing.
+- **Non‑repudiation** – signer cannot deny signing.
+
+Syncfusion supports a hybrid workflow:
+- Viewer → **[Design signature fields](../forms/manage-form-fields/create-form-fields#signature-field)**, capture Draw/Type/Upload electronic signature.
+- PDF Library → **[Apply PKCS#7/CMS digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature)** using a certificate (PFX/P12).
+
+## Add a Signature Field (How-to)
+
+### Using the UI
+1. Open **Form Designer**.
+2. Select **Signature Field**.
+3. Click on the document to place the field.
+4. Configure Name, Tooltip, Required, etc.
+
+
+
+### Using the API
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+ this.pdfviewer.formDesignerModule.addFormField('SignatureField', {
+ name: 'ApproverSignature',
+ pageNumber: 1,
+ bounds: { X: 72, Y: 640, Width: 220, Height: 48 },
+ isRequired: true,
+ tooltip: 'Sign here'
+ }as any);
+{% endhighlight %}
+{% endtabs %}
+
+## Capture Electronic Signature (Draw / Type / Upload)
+Users click the field → dialog appears → they can **Draw**, **Type**, or **Upload** a handwritten signature.
+
+This creates a *visual* signature only (not cryptographically secure).
+
+## Apply PKI Digital Signature (JavaScript PDF Library)
+
+Digital signature must be applied using **@syncfusion/ej2-pdf**.
+
+```ts
+import { PdfDocument, PdfSignature, PdfSignatureField, CryptographicStandard, DigestAlgorithm } from '@syncfusion/ej2-pdf';
+
+const document = new PdfDocument(pdfBytes);
+const page = document.getPage(0);
+
+let field = new PdfSignatureField(page, 'ApproverSignature', {
+ x: 72,
+ y: 640,
+ width: 220,
+ height: 48
+});
+document.form.add(field);
+
+const signature = PdfSignature.create(
+ {
+ cryptographicStandard: CryptographicStandard.cms,
+ digestAlgorithm: DigestAlgorithm.sha256
+ },
+ pfxBytes,
+ password
+);
+
+field.setSignature(signature);
+const signedBytes = await document.save();
+document.destroy();
+```
+
+N> See the PDF Library [Digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) to know more about Digital Signature in PDF Documents.
+
+## Important Notes
+- **Do all form edits first. Sign last.** Any PDF modification *after signing* invalidates the signature.
+- Self‑signed PFX will show **Unknown / Untrusted** until added to Trusted Certificates.
+
+## Best Practices
+- Place signature fields via Viewer for accurate layout.
+- Apply PKI signature using PDF Library only.
+- Use CMS + SHA‑256 for compatibility.
+- Avoid flattening after signing.
+
+## See Also
+- [Validate Digital Signatures](./validate-digital-signatures)
+- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field)
+- [Signature workflows](./signature-workflow)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md
new file mode 100644
index 0000000000..6f52be8a6c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/customize-signature-appearance.md
@@ -0,0 +1,50 @@
+---
+layout: post
+title: Customize Signature Appearance in Angular PDF Viewer | Syncfusion
+description: Learn here all about how to customize visible PKI digital signature appearances using the Syncfusion PDF Library in Angular PDF Viewer.
+platform: document-processing
+control: PdfViewer
+documentation: ug
+---
+
+# Customize Signature Appearance in Angular
+
+This page explains how to customize the visual appearance of PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) (visible signature appearance) produced with the Syncfusion PDF Library.
+
+## Overview
+
+When applying a PKI [digital signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) you can create a visible appearance that includes text, images (logo/seal), fonts, and layout. Appearance rendering is done by composing signature appearance graphics with the PDF Library and embedding that appearance into the signature field.
+
+For implementation details and exact API usage, check the Syncfusion PDF Library references:
+
+- .NET PDF Library — [Drawing text/image in the signature appearance]( https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#drawing-textimage-in-the-signature-appearance)
+- JavaScript PDF Library — [Drawing text/image in the signature appearance](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#drawing-textimage-in-the-signature-appearance)
+
+## What you can customize
+
+- Text (signer name, signing reason, date, descriptive labels)
+- Fonts, sizes, and styles
+- Images (company logo, seal, signature image)
+- Layout and bounding box for the visible appearance
+- Visible vs invisible signatures
+
+## Guidance
+
+- Use the [PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature) APIs to draw strings and images into the signature appearance graphics; attach the resulting appearance to the signature field before finalizing the PKI signature.
+- Prefer embedding high‑quality logo/seal images and use readable fonts for accessibility.
+- Keep the appearance compact to avoid overlapping form content and to preserve signature validation data.
+- Test appearances across typical page sizes and DPI settings to ensure consistent rendering.
+
+## Best Practices
+
+- Use consistent branding for signature visuals.
+- Keep appearance elements minimal and readable.
+- Avoid including data that might change after signing (dates shown should reflect signing time provided by the TSA when used).
+- When producing legally binding signatures, ensure the PKI signing process and appearance comply with your legal/operational requirements.
+
+## See Also
+
+- [Add Digital Signature](./add-digital-signature)
+- [Validate Digital Signatures](./validate-digital-signatures)
+- [Custom fonts for Signature fields](../../how-to/custom-font-signature-field)
+- [Signature workflows](./signature-workflow)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md
new file mode 100644
index 0000000000..efb8bd667a
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/signature-workflow.md
@@ -0,0 +1,313 @@
+---
+layout: post
+title: Digital Signature Workflows in Angular PDF Viewer | Syncfusion
+description: Learn how to add signature fields and apply digital (PKI) signatures in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PdfViewer
+documentation: ug
+---
+
+# Digital Signature Workflows in Angular
+
+This guide shows how to design signature fields, collect handwritten/typed e‑signatures in the browser, and apply **digital certificate (PKI) signatures** to PDF forms using the Syncfusion Angular PDF Viewer and the JavaScript PDF Library. Digital signatures provide **authenticity** and **tamper detection**, making them suitable for legally binding scenarios.
+
+## Overview
+
+A **digital signature** is a cryptographic proof attached to a PDF that verifies the signer's identity and flags any post‑sign changes. It differs from a simple electronic signature (handwritten image/typed name) by providing **tamper‑evidence** and compliance with standards like CMS/PKCS#7. The Syncfusion **JavaScript PDF Library** exposes APIs to create and validate digital signatures programmatically, while the **Angular PDF Viewer** lets you design signature fields and capture handwritten/typed signatures in the browser.
+
+## Quick Start
+
+Follow these steps to add a **visible digital signature** to an existing PDF and finalize it.
+
+1. **Render the Angular PDF Viewer with form services**
+
+{% 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';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ 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/form-filling-document.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+}
+{% endhighlight %}
+{% endtabs %}
+
+The Viewer requires **FormFields** and **FormDesigner** services for form interaction and design, and `resourceUrl` for proper asset loading in modern setups.
+
+2. **Place a signature field (UI or API)**
+ - **UI:** Open **Form Designer** → choose **Signature Field** → click to place → configure properties like required, tooltip, and thickness.
+ 
+ - **API:** Use `addFormField('SignatureField', options)` to create a signature field programmatically.
+
+{% 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';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ 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/form-filling-document.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ onDocumentLoad(): void {
+ (this.pdfViewer as any).formDesignerModule.addFormField('SignatureField', {
+ name: 'ApproverSignature',
+ pageNumber: 1,
+ bounds: { X: 72, Y: 640, Width: 220, Height: 48 },
+ isRequired: true,
+ tooltip: 'Sign here'
+ });
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+3. **Apply a PKI digital signature (JavaScript PDF Library)**
+
+The library provides `PdfSignatureField` and `PdfSignature.create(...)` for PKI signing with algorithms such as **SHA‑256**.
+
+```ts
+import {
+ PdfDocument, PdfSignatureField, PdfSignature,
+ CryptographicStandard, DigestAlgorithm
+} from '@syncfusion/ej2-pdf';
+
+// Load existing PDF bytes (base64/ArrayBuffer)
+const document = new PdfDocument(data);
+const page = document.getPage(0);
+
+// Create a visible signature field if needed
+const field = new PdfSignatureField(page, 'ApproverSignature', {
+ x: 72, y: 640, width: 220, height: 48
+});
+
+// Create a CMS signature using a PFX (certificate + private key)
+const signature = PdfSignature.create(
+ { cryptographicStandard: CryptographicStandard.cms, digestAlgorithm: DigestAlgorithm.sha256 },
+ certData,
+ password
+);
+
+field.setSignature(signature);
+document.form.add(field);
+
+const signedBytes = await document.save('signed.pdf');
+document.destroy();
+```
+
+N> For sequential or multi‑user flows and digital signature appearances, see these live demos: [eSigning PDF Form](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/esigning-pdf-forms), [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/visible-digital-signature) in the Angular Sample Browser.
+
+## How‑to guides
+
+### Add a signature field (UI)
+Use the Form Designer toolbar to place a **Signature Field** where signing is required. Configure indicator text, required state, and tooltip in the properties pane.
+
+ 
+
+### Add a signature field (API)
+
+Adds a signature field programmatically at the given bounds.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+{% raw %}
+(this.pdfViewer as any).formDesignerModule.addFormField('SignatureField', {
+ name: 'CustomerSign',
+ pageNumber: 1,
+ bounds: { X: 56, Y: 700, Width: 200, Height: 44 },
+ isRequired: true
+});
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Capture handwritten/typed signature in the browser
+
+When users click a signature field at runtime, the Viewer’s dialog lets them **draw**, **type**, or **upload** a handwritten signature image—no plugin required—making it ideal for quick approvals.
+
+ 
+
+N> For a ready‑to‑try flow that routes two users to sign their own fields and then finalize, open [eSigning PDF Form](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/esigning-pdf-forms) in the sample browser.
+
+### Apply a PKI digital signature
+
+Use the **JavaScript PDF Library** to apply a cryptographic signature on a field, with or without a visible appearance. See the **Digital Signature** documentation for additional options (external signing callbacks, digest algorithms, etc.).
+
+N> To preview visual differences, check the [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/visible-digital-signature) in our Sample Browser. Digital Signature samples in the Angular sample browser.
+
+### Finalize a signed document (lock)
+
+After collecting all signatures and passing validations, **[Lock](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** the PDF (and optionally restrict permissions) to prevent further edits.
+
+## Signature Workflow Best Practices (Explanation)
+
+Designing a well‑structured signature workflow ensures clarity, security, and efficiency when working with PDF documents. Signature workflows typically involve multiple participants—reviewers and approvers each interacting with the document at different stages.
+
+### Why structured signature workflows matter
+
+A clear signature workflow prevents improper edits, guarantees document authenticity, and reduces bottlenecks during review cycles. When multiple stakeholders sign or comment on a document, maintaining order is crucial for compliance, traceability, and preventing accidental overwrites.
+
+### Choosing the appropriate signature type
+
+Different business scenarios require different signature types. Consider the purpose, regulatory requirements, and level of trust demanded by the workflow.
+
+- **Handwritten/typed (electronic) signature** – Best for informal approvals, acknowledgments, and internal flows. (Captured via the Viewer’s signature dialog.)
+
+ 
+
+- **Digital certificate signature (PKI)** – Required for legally binding contracts and tamper detection with a verifiable signer identity. (Created with the JavaScript PDF Library.)
+
+N> You can explore and try out live demos for [Invisible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/invisible-digital-signature) and [Visible Signature](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/visible-digital-signature) in our Sample Browser.
+
+### Pre‑signing validation checklist
+
+To prevent rework, validate the PDF before enabling signatures:
+- Confirm all **required form fields** are completed (names, dates, totals). (See [Form Validation](../forms/form-validation).)
+- Re‑validate key values (financial totals, tax calculations, contract amounts).
+- Lock or restrict editing during review to prevent unauthorized changes.
+- Use [annotations](../annotation/overview) and [comments](../annotation/comments) for clarifications before signing.
+
+### Role‑based authorization flow
+
+- **Reviewer** – Reviews the document and adds [comments/markups](../annotation/comments). Avoid placing signatures until issues are resolved.
+ 
+- **Approver** – Ensures feedback is addressed and signs when finalized.
+ 
+- **Final Approver** – Verifies requirements, then [Lock Signature](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature) to make signatures permanent and may restrict further edits.
+
+N> **Implementation tip:** Use the PDF Library’s `flatten` when saving to make annotations and form fields permanent before the last signature.
+
+### Multi‑signer patterns and iterative approvals
+- Route the document through a defined **sequence of signers**.
+- Use [comments and replies](../annotation/comments#add-comments-and-replies) for feedback without altering document content.
+- For external participants, share only annotation data (XFDF/JSON) when appropriate instead of the full PDF.
+- After all signatures, **[Lock](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature#lock-signature)** to lock the file.
+
+N> Refer to [eSigning PDF Forms](https://document.syncfusion.com/demos/pdf-viewer/angular/#/bootstrap5/pdfviewer/esigning-pdf-forms) sample that shows two signers filling only their designated fields and finalizing the document.
+
+### Security, deployment, and audit considerations
+
+- **Restrict access:** Enforce authentication and role‑based permissions.
+- **Secure endpoints:** Protect PDF endpoints with token‑based access and authorization checks.
+- **Audit and traceability:** Log signature placements, edits, and finalization events for compliance and audits.
+- **Data protection:** Avoid storing sensitive PDFs on client devices; prefer secure server storage and transmission.
+- **Finalize:** After collecting all signatures, lock to prevent edits.
+
+## See also
+- [Create and Modify Annotation](../annotation/create-modify-annotation)
+- [Customize Annotation](../annotation/customize-annotation)
+- [Digital Signature - JavaScript PDF Library](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/digitalsignature)
+- [Handwritten Signature](../annotation/signature-annotation)
+- [Form Fields API](../form-fields-api)
+- [Add Digital Signature](./add-digital-signature)
+- [Customize Signature Appearance](./customize-signature-appearance)
+- [Signature workflows](./signature-workflow)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md
new file mode 100644
index 0000000000..c098ea4c58
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/digital-signature/validate-digital-signatures.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Validate Digital Signatures in Angular PDF Viewer | Syncfusion
+description: Learn how to validate digital signatures applied to PDF forms using the Syncfusion JavaScript PDF Library with the Angular PDF Viewer.
+platform: document-processing
+control: PdfViewer
+documentation: ug
+---
+
+# Validate Digital Signatures in Angular
+
+This guide explains **how to validate digital signatures** on PDFs when using the **Syncfusion Angular PDF Viewer** together with the **JavaScript PDF Library**. It clarifies what the Viewer does (display fields and signature appearances) and what the **PDF Library** does (perform **cryptographic validation** and produce validation results).
+
+N> **Important:** The Angular PDF Viewer renders signature fields and their visual appearances, but **cryptographic validation is performed by the JavaScript PDF Library**. Use the library to check integrity, certificate trust, and timestamp status, and surface the result in your UI.
+
+## Overview (Explanation)
+
+A **digital signature** is a cryptographic proof embedded in the PDF that allows verifiers to confirm:
+
+- **Document integrity** – The PDF has not changed since it was signed.
+- **Signer identity & trust** – The signer’s certificate chains to a trusted authority or is trusted locally.
+- **Timestamp validity** – (If present) the signature was time‑stamped by a trusted TSA at signing time.
+- **Revocation status** – Whether the signer’s certificate was revoked at or after signing (OCSP/CRL).
+
+ In Syncfusion, you typically **[design the signature field in the Viewer](../forms/manage-form-fields/create-form-fields#signature-field)** and then use the Syncfusion PDF Library to perform cryptographic validation. See the PDF Library documentation for API references and examples: [Digital signature validation (PDF Library)](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#digital-signature-validation).
+
+## How validation fits in the Viewer flow (Concept)
+
+1. Load and interact with the PDF in **Angular PDF Viewer** (place fields, fill forms).
+2. Use **JavaScript PDF Library** to **open the PDF bytes** and **validate the signature**.
+3. Display the validation outcome (valid/invalid/unknown) in your Angular UI (badge, toast, side panel).
+
+ ## How‑to: Validate a digital signature (Client‑side)
+
+ Cryptographic signature validation is performed by the Syncfusion PDF Library. Please refer to the PDF Library documentation for detailed guidance and sample code. The following pages cover validation concepts, APIs, and full examples:
+
+- [Digital signature validation overview](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#digital-signature-validation)
+
+- [Validate all signatures in a PDF document](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#validate-all-signatures-in-pdf-document)
+
+- [Validate and classify digital signatures in a PDF document](https://help.syncfusion.com/document-processing/pdf/pdf-library/net/working-with-digitalsignature#validate-and-classify-digital-signatures-in-a-pdf-document)
+
+After using the PDF Library to obtain validation results (integrity, trust, timestamp), surface those results in your Angular UI (for example: badge, table, or details panel) to communicate status to users.
+
+## Interpreting validation outcomes (Reference)
+
+- **Valid** – Integrity OK **and** certificate is trusted. (Timestamp valid if present.)
+- **Invalid** – Bytes changed after signing **or** signature object malformed.
+- **Unknown/Not Trusted** – Integrity OK but signer certificate is not trusted locally (common with **self‑signed PFX** used for demos). Import the signer certificate into the trusted store to see a *Valid* badge.
+
+## Best practices (Explanation)
+
+- **Single‑save rule:** Do **all edits first**, then **sign**, and **do not modify** the PDF after signing; modifying bytes after signing will invalidate the signature.
+- **Establish trust:** For demos, a self‑signed PFX will appear *Unknown*. For production, use a certificate that chains to a trusted CA or import the signer/issuer to the verifier’s trust store.
+- **Prefer timestamp (TSA):** A trusted timestamp improves long‑term validation even if the signer’s cert later expires or is revoked.
+- **Surface status in UI:** Show a clear badge (Valid/Invalid/Unknown) near the signature field or toolbar, and offer a *View details* panel with integrity, trust, and timestamp info.
+
+## Troubleshooting
+
+- **Signature shows Invalid** – Check whether the PDF was modified **after** signing (e.g., second save/flatten). Re‑sign as the last step.
+- **Unknown signer** – You are using a **self‑signed** PFX. Import the certificate into the validator’s trust store or use a CA‑issued certificate.
+- **Algorithm unsupported** – Use CMS/PKCS#7 with SHA‑256 (avoid SHA‑1).
+- **No revocation info** – Ensure OCSP/CRL endpoints are reachable by the validator or embed revocation data if supported.
+
+## See also
+- [Add Digital Signature](./add-digital-signature)
+- [Customize Signature Appearance](./customize-signature-appearance)
+- [Signature workflows](./signature-workflow)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/flatten-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/flatten-form-fields.md
new file mode 100644
index 0000000000..eed95e9e83
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/flatten-form-fields.md
@@ -0,0 +1,122 @@
+---
+layout: post
+title: Flatten PDF form fields in Angular PDF Viewer | Syncfusion
+description: Learn how to flatten interactive PDF form fields before download or save-as in EJ2 Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Flatten PDF form fields in Angular
+
+## Overview
+
+Flattening PDF forms converts interactive fields such as textboxes, dropdowns, checkboxes, signatures, etc., into non‑editable page content. Use this when you want to protect filled data, finalize a document, or prepare it for secure sharing.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed and configured
+- Basic viewer setup completed with toolbar and page organizer services injected. For more information, see [getting started guide](../getting-started)
+
+## Flatten forms before downloading PDF
+
+1. Add a ViewChild to the [`PdfViewerComponent`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer) so you can access viewer APIs from event handlers.
+2. Intercept the download flow using [`downloadStart`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#downloadstart) and cancel the default flow.
+3. Retrieve the viewer's blob via [`saveAsBlob()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#saveasblob) and convert the blob to base64.
+4. Use `PdfDocument` from Syncfusion PDF Library to open the document, set `field.flatten = true` for each form field, then save.
+5. For the flattening the form fields when downloading through *Save As* option in Page Organizer, repeat steps 2–4 by using [`pageOrganizerSaveAs`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#pageorganizersaveas) event.
+
+## Complete example
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner,
+ PageOrganizer, Print, PageOrganizerSaveAsEventArgs, DownloadStartEventArgs
+} from '@syncfusion/ej2-angular-pdfviewer';
+import { PdfDocument, PdfField } from '@syncfusion/ej2-pdf';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, LinkAnnotation,
+ ThumbnailView, BookmarkView, TextSelection, TextSearch, FormFields, FormDesigner, PageOrganizer, Print],
+ template: `
+
+
+ `
+})
+export class AppComponent {
+ @ViewChild('pdfViewer')
+ public pdfViewer!: PdfViewerComponent;
+
+ blobToBase64(blob: Blob): Promise
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent implements OnInit {
- public document: string =
- 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string =
- 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+The Form Designer toolbar can be customized by specifying the tools to display and arranging them in the required order using the [FormDesignerToolbarItems](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesignertoolbaritem) property.
- ngOnInit(): void {}
-}
+This customization helps limit the available tools and simplify the user interface. A code example is available [here](../toolbar-customization/form-designer-toolbar#3-show-or-hide-form-designer-toolbar-items).
-{% endhighlight %}
-{% endtabs %}
-
-For more information about creating and editing form fields in the PDF Viewer, refer to the [Form Creation in Angular PDF Viewer documentation](./manage-form-fields/create-form-fields).
-
-## Show or Hide the Built-in Form Designer Toolbar
-
-You can control the visibility of the Form Designer toolbar using the [isFormDesignerToolbarVisible()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#isformdesignertoolbarvisible) property. This allows the application to display or hide the Form Designer tools in the PDF Viewer based on user or workflow requirements.
-
-**Use this property to:**
-- Show the Form Designer toolbar when form design is required
-- Hide the toolbar to provide a cleaner viewing experience
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-import { Component, ViewChild } from '@angular/core';
-import { PdfViewerComponent, PdfViewerModule, ToolbarService, FormDesignerService, FormFieldsService } from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
-
-
-
-
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+### 2. Initialize reference
- @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+Initialize the viewer with a `@ViewChild` so you can call export methods.
- exportFdf(): void {
- // Destination is optional; if omitted the browser will prompt.
- this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
- }
-}
+{% highlight ts %}
+@ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
{% endhighlight %}
-### Export as XFDF
-The following example exports form field data as XFDF.
+### 3. Export as FDF
-{% highlight ts tabtitle="Standalone" %}
-import { Component, ViewChild } from '@angular/core';
-import {
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PdfViewerModule,
- PdfViewerComponent,
-} from '@syncfusion/ej2-angular-pdfviewer';
+Use [`exportFormFields(destination?, FormFieldDataFormat.Fdf)`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#exportformfields) to download an FDF file.
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
-
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+{% highlight ts %}
+this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+{% endhighlight %}
- @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+### 4. Export as XFDF
- exportXfdf(): void {
- this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
- }
-}
+Use [`FormFieldDataFormat.Xfdf`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formfielddataformat) to export XFDF.
+
+{% highlight ts %}
+this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
{% endhighlight %}
-### Export as JSON
-The following example exports form field data as JSON.
+### 5. Export as JSON
-{% highlight ts tabtitle="Standalone" %}
-import { Component, ViewChild } from '@angular/core';
-import {
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PdfViewerModule,
- PdfViewerComponent,
-} from '@syncfusion/ej2-angular-pdfviewer';
+Use [`FormFieldDataFormat.Json`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formfielddataformat) to export form data as a JSON file.
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
-
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+{% highlight ts %}
+this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+{% endhighlight %}
- @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+### 6. Export as a JavaScript object
- exportJson(): void {
- this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
- }
-}
+Use [`exportFormFieldsAsObject(format)`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#exportformfieldsasobject) to get data for API calls or storing in a database.
+
+{% highlight ts %}
+const data = await this.pdfviewer.exportFormFieldsAsObject();
{% endhighlight %}
-### Export as Object
+## Complete example
-Use [exportFormFieldsAsObject()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportformfieldsasobject) to obtain form data as a JavaScript object for database or API integration.
+The example below provides a single page with buttons to export in all supported formats. It uses the same imports shown above and is ready to run in a typical Angular app.
{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
+{% highlight ts %}
import { Component, ViewChild } from '@angular/core';
import {
ToolbarService,
@@ -208,6 +88,7 @@ import {
FormDesignerService,
PdfViewerModule,
PdfViewerComponent,
+ FormFieldDataFormat,
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
@@ -215,12 +96,17 @@ import {
standalone: true,
imports: [PdfViewerModule],
template: `
-
-
-
`,
providers: [
@@ -235,33 +121,41 @@ import {
],
})
export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/form-designer.pdf';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
@ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
exportedData: object | undefined;
+ exportFdf(): void {
+ this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Fdf);
+ }
+
+ exportXfdf(): void {
+ this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Xfdf);
+ }
+
+ exportJson(): void {
+ this.pdfviewer.exportFormFields('FormData', FormFieldDataFormat.Json);
+ }
+
exportObj(): void {
this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Fdf).then(data => {
- this.exportedData = data; // Persist or send to server
+ this.exportedData = data;
console.log('Exported object:', this.exportedData);
});
- // Alternatives:
- // this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Xfdf).then(...)
- // this.pdfviewer.exportFormFieldsAsObject(FormFieldDataFormat.Json).then(...)
}
}
{% endhighlight %}
{% endtabs %}
-## Common Use Cases
+## Troubleshooting
-- Save user-entered data to your server without altering the original PDF.
-- Export as JSON for REST API integration.
-- Export as FDF/XFDF for compatibility with other PDF tools.
-- Export as Object to merge with app state or store securely.
-- Automate exports after [validation](../form-validation) using [validateFormFields()](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#validateformfields)
+- Ensure `FormFieldsService` and [`FormDesignerService`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) are injected when using form APIs.
+- Confirm [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) points to the matching `ej2-pdfviewer-lib` version.
+- If exports fail in restrictive browsers, check popup/download settings and CORS for hosted endpoints.
+- For server-side persistence, use [`exportFormFieldsAsObject()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#exportformfieldsasobject) and send the result to your API.
[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md
index e2c1f58f0c..5bae57cfb8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-export-events.md
@@ -9,8 +9,9 @@ documentation: ug
# PDF Form Import and Export Events in Angular
-Import/Export events let you **track and customize the entire life cycle** of form data being imported into or exported from the PDF Viewer.
-Use these events to:
+Import and export events enable tracking and customization of the full life cycle of form data imported into or exported from the PDF Viewer.
+
+Use events to:
- Validate inputs before processing.
- Show progress indicators.
- Log audit trails.
@@ -24,69 +25,23 @@ Each event provides detailed context through typed event arguments such as [Impo
- [importFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importfailed) — Fires if the import fails.
**Example: Handle Import Events**
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-import { Component } from '@angular/core';
-import {
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PdfViewerModule,
-} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
+
+
+
+
+
+
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-
- onImportStart(args: any): void {
- console.log('Import started', args);
- // e.g. show spinner, validate inputs
- }
-
- onImportSuccess(args: any): void {
- console.log('Import success', args);
- // e.g. hide spinner, show toast
- }
-
- onImportFailed(args: any): void {
- console.error('Import failed', args);
- // e.g. show error dialog
- }
+
+{% highlight ts %}
+onImportStart(args: any): void {
+ console.log('Import started', args);
+ // e.g. show spinner, validate inputs
+}
+
+onImportSuccess(args: any): void {
+ console.log('Import success', args);
+ // e.g. hide spinner, show toast
+}
+
+onImportFailed(args: any): void {
+ console.error('Import failed', args);
+ // e.g. show error dialog
}
{% endhighlight %}
-{% endtabs %}
## Export Events
- [exportStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportstart) — Fires when an export begins.
@@ -94,69 +49,23 @@ export class AppComponent {
- [exportFailed](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#exportfailed) — Fires if the export fails.
**Example: Handle Export Events**
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-import { Component } from '@angular/core';
-import {
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PdfViewerModule,
-} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-
- onExportStart(args: any): void {
- console.log('Export started', args);
- // e.g. disable export UI
- }
-
- onExportSuccess(args: any): void {
- console.log('Export success', args);
- // e.g. enable UI, provide download link
- }
-
- onExportFailed(args: any): void {
- console.error('Export failed', args);
- // e.g. re-enable UI, notify user
- }
+
+{% highlight ts %}
+onExportStart(args: any): void {
+ console.log('Export started', args);
+ // e.g. disable export UI
+}
+
+onExportSuccess(args: any): void {
+ console.log('Export success', args);
+ // e.g. enable UI, provide download link
+}
+
+onExportFailed(args: any): void {
+ console.error('Export failed', args);
+ // e.g. re-enable UI, notify user
}
{% endhighlight %}
-{% endtabs %}
## Key Notes
- importStart, importSuccess, importFailed cover the full import life cycle.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
index 16d056cd77..49d907a7cb 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/import-export-form-fields/import-form-fields.md
@@ -9,21 +9,22 @@ documentation: ug
# Import PDF Form Data into Angular PDF Viewer
-The **PDF Viewer** lets you import values into interactive form fields in the currently loaded PDF. You can import data from these formats:
+This guide shows how to import form field values into an already loaded PDF in the EJ2 Angular PDF Viewer. **Supported import formats**: FDF, XFDF, JSON, and importing from a JavaScript object.
-- [FDF](#import-as-fdf)
-- [XFDF](#import-xfdf)
-- [JSON](#import-json)
+## Steps to import data
-## API to use
-- [importFormFields](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#importformfields)(sourceOrObject, format)
+1. Import the viewer, inject `FormFieldsService` / `FormDesignerService`, and create a `@ViewChild` to call `importFormFields`.
-N>If you’re using a **server-backed viewer**, set serviceUrl before importing.
+2. Call [`importFormFields(data, format)`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#importformfields) where `format` is one of `FormFieldDataFormat.Fdf`, `FormFieldDataFormat.Xfdf`, or `FormFieldDataFormat.Json`. `data` may be a file path (for server/file-based imports) / base64 string or a JavaScript object mapping field names to values.
-### Import FDF
+3. Verify the form fields are populated after the import completes. For server-backed imports, ensure [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) is configured and the import file is accessible by the server.
+
+## Example
+
+The example below provides a minimal Angular app with four buttons to import FDF, XFDF, JSON, or an object. Replace the import file identifiers (`'File'`) with your file path or implement a file upload to pass a Blob/stream.
{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
+{% highlight ts %}
import { Component, ViewChild } from '@angular/core';
import {
ToolbarService,
@@ -44,12 +45,17 @@ import {
standalone: true,
imports: [PdfViewerModule],
template: `
-
-
-
`,
providers: [
@@ -65,138 +71,44 @@ import {
})
export class AppComponent {
public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
@ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
+ // The file for importing should be accessible at the given path or as a base 64 string depending on your integration
importFdf(): void {
- // The file for importing should be accessible at the given path or as a file stream depending on your integration
this.pdfviewer.importFormFields('File', FormFieldDataFormat.Fdf as any);
}
-}
-{% endhighlight %}
-{% endtabs %}
-
-### Import XFDF
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-import { Component, ViewChild } from '@angular/core';
-import {
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PdfViewerModule,
- PdfViewerComponent,
- FormFieldDataFormat,
-} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
+
+
+
+
+
+
-
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-
- @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
importXfdf(): void {
- // The file for importing should be accessible at the given path or as a file stream depending on your integration
this.pdfviewer.importFormFields('File', FormFieldDataFormat.Xfdf as any);
}
-}
-{% endhighlight %}
-{% endtabs %}
-
-### Import JSON
-
-{% tabs %}
-{% highlight ts tabtitle="Standalone" %}
-import { Component, ViewChild } from '@angular/core';
-import {
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- PdfViewerModule,
- PdfViewerComponent,
- FormFieldDataFormat,
-} from '@syncfusion/ej2-angular-pdfviewer';
-
-@Component({
- selector: 'app-root',
- standalone: true,
- imports: [PdfViewerModule],
- template: `
-
-
-
- `,
- providers: [
- ToolbarService,
- MagnificationService,
- NavigationService,
- AnnotationService,
- TextSelectionService,
- TextSearchService,
- FormFieldsService,
- FormDesignerService,
- ],
-})
-export class AppComponent {
- public document: string = 'https://cdn.syncfusion.com/content/pdf/form-filling-document.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib';
-
- @ViewChild('pdfViewer') public pdfviewer!: PdfViewerComponent;
importJson(): void {
- // The file for importing should be accessible at the given path or as a file stream depending on your integration
this.pdfviewer.importFormFields('File', FormFieldDataFormat.Json as any);
}
+
+ // Import from a JavaScript object (fieldName: value)
+ importFromObject(): void {
+ const formDataObject = {
+ 'fullname': 'Jane Doe',
+ 'email': 'jane.doe@example.com',
+ 'agreeTerms': 'yes'
+ };
+ this.pdfviewer.importFormFields(JSON.stringify(formDataObject), FormFieldDataFormat.Json as any);
+ }
}
{% endhighlight %}
{% endtabs %}
-## Common Use Cases
+**Expected result**: The loaded PDF's interactive form fields are populated with the values from the imported file/object. For object imports, fields matching the object keys receive the provided values.
+
+## Troubleshooting
-- Pre-fill application forms from a database using JSON.
-- Migrate data from other PDF tools using FDF/XFDF.
-- Restore user progress saved locally or on the server.
-- Combine with validation to block print/download until required fields are completed.
+- If imports do not populate fields, confirm the field names in the source match the PDF form field names.
+- For file-based imports, ensure you use server mode and that the import file is accessible to the viewer.
+- If using a Blob, pass the encoded base64 string of Blob/stream instead of the string `'File'`.
+- Check browser console for network errors when the viewer attempts to fetch import files.
[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md
index c2ecc2dad6..e8ef2fe5a2 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/manage-form-fields/create-form-fields.md
@@ -9,24 +9,30 @@ documentation: ug
# Create PDF Form Fields in Angular
-You can create or add new form fields either visually using the [Form Designer UI](https://document.syncfusion.com/demos/pdf-viewer/angular/#/tailwind3/pdfviewer/default) or dynamically using APIs.
+Create or add new form fields visually with the Form Designer UI or programmatically using the Angular PDF Viewer API. This guide explains both methods and shows field‑specific examples and a complete runnable example.
-## Create Form Fields Using the Form Designer UI
-Use this approach when you want to design forms manually without writing code.
+**Outcome:**
-**Steps:**
+The guide explains the following:
+- How to add fields with the Form Designer UI.
+- How to add and edit fields programmatically (API).
+- How to add common field types: Textbox, Password, CheckBox, RadioButton, ListBox, DropDown, Signature, Initial.
-1. Enable [Form Designer](../form-designer) mode in the PDF Viewer.
-2. Click a form field type (Textbox, Checkbox, Dropdown, etc.) from the toolbar.
-3. Click on the PDF page to place the form field.
-4. Move or resize the field as required.
-5. Configure field properties using the **Properties** panel.
+## Steps
+
+### 1. Create form fields using Form Designer UI
+
+- Enable the Form Designer mode in the PDF Viewer. See [Form Designer overview](../overview).
+- Select a field type from the toolbar and click the PDF page to place it.
+- Move/resize the field and configure properties in the **Properties** panel.
-## Add Form Fields Programmatically (API)
+### 2. Create Form fields programmatically
-Use this approach when you want to generate form fields dynamically based on data or application logic.
+Use [`addFormField`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner#addformfield) method of the [formDesigner](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) module inside the viewer's [`documentLoad`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#documentload) handler or in response to user actions.
+
+Use this approach to generate form fields dynamically based on data or application logic.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
@@ -93,13 +99,14 @@ export class AppComponent {
- Pre-filling forms from databases
- Automating form creation workflows
-## PDF Form Field Types and How to Add Them
-Each field can be added via the **Form Designer** or **programmatically**.
+## Field‑specific instructions
+
+Below are concise UI steps and the programmatic examples for each common field type.
### Textbox
-**Add via Toolbar (UI)**
-- Open **Form Designer** → select **Textbox** → click on the page → configure in **Properties**.
+**Add via UI**: Open Form Designer toolbar → select Textbox → click page → configure properties
+
**Add Programmatically (API)**
@@ -166,8 +173,7 @@ export class AppComponent {
### Password
-**Add via Toolbar (UI)**
-- Select **Password** → place it → configure tooltip, required, max length.
+**Add via UI**: Open form designer toolbar → Select Password → place → configure properties
**Add Programmatically (API)**
@@ -233,8 +239,7 @@ export class AppComponent {
{% endtabs %}
### CheckBox
-**Add via Toolbar (UI)**
-- Select **CheckBox** → click to place → duplicate for options → set isChecked, tooltip, appearance.
+**Add via UI**: Open form designer toolbar → Select CheckBox → click to place → duplicate for options.
**Add Programmatically (API)**
@@ -299,8 +304,8 @@ export class AppComponent {
{% endtabs %}
### RadioButton
-**Add via Toolbar (UI)**
-- Select **RadioButton** → place buttons with the **same Name** to group → configure selection/colors.
+
+**Add via UI**: Open form designer toolbar → Select RadioButton → place buttons using the same `name` to group them.
**Add Programmatically (API)**
@@ -370,8 +375,8 @@ export class AppComponent {
{% endtabs %}
### ListBox
-**Add via Toolbar (UI)**
-- Select **ListBox** → place → add items in **Properties**.
+
+**Add via UI**: Open form designer toolbar → Select ListBox → place → add items in Properties.
**Add Programmatically (API)**
@@ -440,8 +445,8 @@ export class AppComponent {
{% endtabs %}
### DropDown
-**Add via Toolbar (UI)**
-- Select **DropDown** → place → add items → set default value.
+
+**Add via UI**: Open form designer toolbar → Select DropDown → place → add items → set default value.
**Add Programmatically (API)**
@@ -510,8 +515,8 @@ export class AppComponent {
{% endtabs %}
### Signature Field
-**Add via Toolbar (UI)**
-- Select **Signature Field** → place where signing is required → configure indicator text, thickness, tooltip, required.
+
+**Add via UI**: Open form designer toolbar → select Signature Field → place where signing is required → configure indicator text/thickness/tooltip/isRequired.
**Add Programmatically (API)**
@@ -575,8 +580,9 @@ export class AppComponent {
{% endtabs %}
### Initial Field
-**Add via Toolbar (UI)**
-- Select **Initial Field** → place where initials are needed → configure text and required state.
+
+**Add via UI**: Open form designer toolbar → select Initial Field → place where initials are needed → configure text/isRequired.
+
**Add Programmatically (API)**
@@ -639,9 +645,9 @@ export class AppComponent {
{% endhighlight %}
{% endtabs %}
-## Add Fields Dynamically with setFormFieldMode
+## Add fields dynamically with setFormFieldMode
-Use **setFormFieldMode()** to add fields on the fly based on user actions.
+Use [`setFormFieldMode()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner#setformfieldmode) to switch the designer into a specific field mode and let users add fields on the fly.
### Edit Form Fields in Angular PDF Viewer
You can edit form fields using the UI or API.
@@ -652,6 +658,7 @@ You can edit form fields using the UI or API.
- Use the toolbar to toggle field mode or add new fields.
#### Edit Programmatically
+
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
import { Component, ViewChild } from '@angular/core';
@@ -729,12 +736,17 @@ export class AppComponent {
[View Sample on GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
-## See Also
+## Troubleshooting
+
+- If fields do not appear, verify [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) matches the EJ2 PDF Viewer library version and that the document loads correctly.
+- If using WASM or additional services, confirm those resources are reachable from the environment.
+
+## Related topics
- [Form Designer overview](../overview)
- [Form Designer Toolbar](../../toolbar-customization/form-designer-toolbar)
- [Modify form fields](./modify-form-fields)
-- [Style form fields](./style-form-fields)
+- [Style form fields](./customize-form-fields)
- [Remove form fields](./remove-form-fields)
- [Group form fields](../group-form-fields)
- [Form validation](../form-validation)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/read-form-field-values.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/read-form-field-values.md
new file mode 100644
index 0000000000..7b5180519e
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/read-form-field-values.md
@@ -0,0 +1,106 @@
+---
+layout: post
+title: Read and Extract PDF Form Field Values in Angular | Syncfusion
+description: Learn how to read and extract values from PDF form fields in the EJ2 Angular PDF Viewer, including text, checkboxes, radio buttons, dropdowns, and signatures.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Read and Extract PDF Form Field Values in Angular PDF Viewer
+
+The Angular PDF Viewer allows you to read the values of interactive PDF form fields including textboxes, checkboxes, radio buttons, dropdowns, signatures, and more. Use the APIs below to retrieve form data programmatically for validation, submission, or syncing with your app state.
+
+This guide shows common patterns with concise code snippets you can copy into your Angular components.
+
+## Access the Form Field Collection
+
+Get all available form field data by reading the viewer's `formFieldCollections`. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections).
+
+```ts
+const formFields = this.pdfViewer.formFieldCollections;
+```
+
+## Read Text Field Values
+
+Find the text field by name and read its value property. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections).
+
+```ts
+const formFields = this.pdfViewer.formFieldCollections;
+const name = (formFields.find(field => field.type === 'Textbox' && field.name === 'name')).value;
+```
+
+## Read Checkbox / Radio Button Values
+
+Check whether a checkbox or radio button is selected by reading its `isChecked` value. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections).
+
+```ts
+const formFields = this.pdfViewer.formFieldCollections;
+const radioButtons = formFields.filter(field => field.type === 'RadioButton' && field.name === 'gender');
+const checkedField = (radioButtons.find(field => field.isChecked)).name;
+```
+
+## Read Dropdown values
+
+Read the dropdown's selected option by accessing `value` property. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections).
+
+```ts
+const formFields = this.pdfViewer.formFieldCollections;
+const state = (formFields.find(field => field.type === 'DropdownList' && field.name === 'state')).value;
+```
+
+## Read Signature Field Data
+
+This reads the signature path data stored in a signature field so it can be later converted to an image. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections).
+
+```ts
+const formFields = this.pdfViewer.formFieldCollections;
+const signData = (formFields.find(field => field.type === 'SignatureField' && field.name === 'signature')).value;
+```
+
+## Extract All Form Field Values
+
+This iterates every field in the collection and logs each field's name and value, useful for exporting or validating all form data. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections).
+
+```ts
+const formFields = this.pdfViewer.formFieldCollections;
+formFields.forEach(field => {
+ if (field.type === 'RadioButton' || field.type === 'Checkbox') {
+ console.log(`${field.name}: ${field.isChecked}`);
+ }
+ else {
+ console.log(`${field.name}: ${field.value}`);
+ }
+});
+```
+
+## Extract Form Data After Document Loaded
+
+Place your form-reading logic inside `documentLoad` event handler, so values are read after the PDF is loaded in the viewer. For more information, see [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections) and [`documentLoad`](../events#documentload).
+
+```ts
+// If you need to access form data right after the PDF loads
+onDocumentLoad(): void {
+ const formFields = this.pdfViewer.formFieldCollections;
+ const email = formFields.find(field => field.name === 'email').value;
+ console.log("Email: ", email);
+}
+```
+
+## Use Cases
+
+- Validate and pre-fill form fields in your application before user submission.
+- Submit filled form data from the viewer to a back end service for processing or storage.
+- Synchronize form field values with external UI components to keep application state in sync.
+- Export form data for reporting, archival, or integration with other systems.
+
+## Troubleshooting
+
+- Use the exact field names defined in the PDF when searching through the `formFieldCollections`.
+- If a field might be missing in some documents, add null checks.
+
+## See also
+
+- [`formFieldCollections`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#formfieldcollections)
+- [`documentLoad`](../events#documentload)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/forms/submit-form-data.md b/Document-Processing/PDF/PDF-Viewer/angular/forms/submit-form-data.md
new file mode 100644
index 0000000000..7c1303b950
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/forms/submit-form-data.md
@@ -0,0 +1,140 @@
+---
+layout: post
+title: Submit PDF Form Data to a Server using Angular PDF Viewer | Syncfusion
+description: Submit filled PDF form data from the EJ2 Angular PDF Viewer to a backend server, with a complete frontend example and a minimal Node receiver.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Submit PDF Form Data to a Server in Angular
+
+## Overview
+
+The Angular PDF Viewer allows submitting filled form data like text fields, checkboxes, radio buttons and dropdown values to a back end server for processing. This guide shows how to extract form data from the viewer and **post** it as `JSON` to a server endpoint.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed and configured in your Angular app
+- PDF contains interactive form fields
+- The viewer must be loaded before reading values
+- If posting cross-origin, ensure CORS is enabled on the server
+
+## Steps to send data
+
+1. Enable form designer in the viewer
+
+ - Inject `FormFields` and [`FormDesigner`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/formdesigner) services into the viewer so form APIs are available.
+
+2. Export form data from the viewer
+
+ - Use [`viewer.exportFormFieldsAsObject()`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#exportformfieldsasobject) to obtain the filled values as JSON.
+
+3. POST the exported JSON to your back end
+
+ - Use `fetch` to send the JSON. The server must accept `application/json` and handle CORS if cross-domain.
+
+4. Trigger submission from a UI action
+
+ - Call the export + POST flow from a button click or form submit handler.
+
+## Example
+
+This full example shows an Angular component with the PDF viewer and a Submit button that sends form data to `/api/submit-form`.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+ PdfViewerModule,
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ PdfViewerComponent,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ TextSelectionService,
+ TextSearchService,
+ FormFieldsService,
+ FormDesignerService,
+ ],
+})
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer') public pdfviewer: PdfViewerComponent;
+ ngOnInit(): void {}
+ sendToServer(formData: any): Promise
+
+
+ | |
| StickyNoteEditorPlaceholder | -Write Your Note... | +Write Your Notehttps://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui. |
| StickyNoteIcons | @@ -747,5 +747,5 @@ The following table contains the default name and value details used in the SfPd ## See Also -- [Right To Left](../right-to-left) -- [Getting Started](../getting-started) +- [Right To Left](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/right-to-left) +- [Getting Started](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/getting-started) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Lock-Unlock.md b/Document-Processing/PDF/PDF-Viewer/maui/Lock-Unlock.md index 377605ff14..4903336007 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Lock-Unlock.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Lock-Unlock.md @@ -93,6 +93,6 @@ void LockSelectedAnnotation(Annotation selectedAnnotation) * Similarly, to unlock the selected annotation, set the [IsLocked](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.Annotation.html#Syncfusion_Maui_PdfViewer_Annotation_IsLocked) property value to `false`. ## See Also -- [Annotations Overview](../annotations-overview) -- [Select and Deselect Annotations](../select-deselect-annotations) -- [Show and Hide Annotations](../show-hide) +- [Annotations Overview](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/annotations-overview) +- [Select and Deselect Annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/select-deselect-annotations) +- [Show and Hide Annotations](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/show-hide) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md b/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md index 28657fe153..6b457c344d 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Magnification.md @@ -154,6 +154,6 @@ PdfViewer.PersistZoomOnPageChange = false; {% endtabs %} ## See Also -- [Scrolling](../scrolling) -- [Page Navigation](../page-navigation) -- [Gesture Events](../gesture-events) +- [Scrolling](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/scrolling) +- [Page Navigation](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/page-navigation) +- [Gesture Events](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/gesture-events) diff --git a/Document-Processing/PDF/PDF-Viewer/maui/Migration.md b/Document-Processing/PDF/PDF-Viewer/maui/Migration.md index 301c1fa95e..a9258f9e7b 100644 --- a/Document-Processing/PDF/PDF-Viewer/maui/Migration.md +++ b/Document-Processing/PDF/PDF-Viewer/maui/Migration.md @@ -242,7 +242,7 @@ To simplify migration from [Xamarin SfPdfViewer](https://www.syncfusion.com/xamaAPI Unavailable | In .NET MAUI PDF Viewer, there is no API to configure common settings for handwritten signatures. However, you can achieve this by handling the {{'[SignatureCreated](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_SignatureCreated)'| markdownify }} event, which allows you to access and customize each handwritten signature when it is created using the built-in signature dialog.
- Refer to the {{'[Signature Created Event user guide](https://help.syncfusion.com/maui/pdf-viewer/signature#signature-created-event)'| markdownify }} for instructions on accessing the handwritten signature and setting values like color and border width. + Refer to the {{'[Signature Created Event user guide](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/maui/signature#signature-created-event)'| markdownify }} for instructions on accessing the handwritten signature and setting values like color and border width. |
+ Current mode: {currentFitMode === 'page' ? 'Fit Page' : 'Fit Width'} +
++ Current mode: {currentFitMode === 'page' ? 'Fit Page' : 'Fit Width'} +
++ Fit modes override zoom. Use Restore to return to last manual zoom. +
++ Fit modes override zoom. Use Restore to return to last manual zoom. +
++ Zoom level is controlled by the application. +
++ Zoom level is controlled by the application. +
+| Document Processing Libraries | +Skills | +
|---|---|
| Word (DocIO) | +
+ syncfusion-dotnet-word + syncfusion-java-word + |
+
|
+ syncfusion-dotnet-pdf + syncfusion-dotnet-pdf-to-image + syncfusion-flutter-pdf + syncfusion-javascript-pdf + |
+ |
| Excel (XlsIO) | +
+ syncfusion-dotnet-excel + syncfusion-flutter-excel + |
+
| PowerPoint (Presentation) | +syncfusion-dotnet-powerpoint | +
| Markdown | +syncfusion-dotnet-markdown | +
| Smart Data Extraction | +syncfusion-dotnet-smart-data-extraction | +
| Calculate | +syncfusion-dotnet-calculate | +
| Element | +Word to WordML | +Word Processing 2007 XML document to Word | +Word Processing 2007 XML document to WordML | +Word Processing 2003 XML document to Word / WordML | +
|---|---|---|---|---|
| Custom Shapes |
+ Yes |
+ Yes |
+ Yes |
+ Yes |
+
| Embedded fonts |
+ Yes |
+ Yes |
+ Yes |
+ No |
+
| Equation |
+ Yes |
+ Yes |
+ Yes |
+ No |
+
| SmartArt |
+ No |
+ Yes |
+ No |
+ No |
+
| WordArt |
+ Yes |
+ Yes |
+ Yes |
+ No |
+
| Form Fields |
+ Yes |
+ Yes |
+ Yes |
+ No |
+
| Ole Object |
+ Yes |
+ Yes |
+ Yes |
+ No |
+
| Element | -Limitations or Unsupported elements | -
|---|---|
|
-Custom Shapes |
-
-Not supported |
-
|
-Embedded fonts |
-
-Not supported |
-
|
-Equation |
-
-Not supported |
-
|
-SmartArt |
-
-Not supported |
-
|
-WordArt |
-
-Not supported |
-
| -Form Fields - | --Unparsed in Word Processing 2003 XML document. - | -
| -Ole Object - | --Unparsed in Word Processing 2003 XML document. - | -