Integrated latest changes at 05-06-2025 10:30:07 PM

Author: SyncfusionBuild

ej2-angular/ai-assistview/accessibility.md

@@ -73,4 +73,4 @@ The AI AssistView component's accessibility levels are ensured through an [acces
 
 ## See also
 
-* [Accessibility in Syncfusion Angular components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)

ej2-angular/ai-assistview/getting-started.md

@@ -41,17 +41,17 @@ ng new my-app
 cd my-app
 ```
 
-## Installing Syncfusion AI AssistView package
+## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> AI AssistView package
 
-Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
+Syncfusion<sup style="font-size:70%">&reg;</sup> packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion<sup style="font-size:70%">&reg;</sup> package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
 
-Currently, Syncfusion provides two types of package structures for Angular components,
+Currently, Syncfusion<sup style="font-size:70%">&reg;</sup> provides two types of package structures for Angular components,
 1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format)
 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
 
 ### Ivy library distribution package
 
-Syncfusion Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
 
 Add [`@syncfusion/ej2-angular-interactive-chat`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48) package to the application.
 
@@ -61,7 +61,7 @@ npm install @syncfusion/ej2-angular-interactive-chat --save
 
 ### Angular compatibility compiled package(ngcc)
 
-For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the `ngcc` package use the below.
+For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components. To download the `ngcc` package use the below.
 
 Add [`@syncfusion/ej2-angular-interactive-chat@ngcc`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48-ngcc) package to the application.
 

ej2-angular/chat-ui/accessibility.md

@@ -77,4 +77,4 @@ The Chat UI component's accessibility levels are ensured through an [accessibili
 
 ## See also
 
-* [Accessibility in Syncfusion components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> components](../common/accessibility)

ej2-angular/chat-ui/getting-started.md

@@ -43,17 +43,17 @@ ng new my-app
 cd my-app
 ```
 
-## Installing Syncfusion Chat UI package
+## Installing Syncfusion<sup style="font-size:70%">&reg;</sup> Chat UI package
 
-Syncfusion packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
+Syncfusion<sup style="font-size:70%">&reg;</sup> packages are distributed in npm as `@syncfusion` scoped packages. You can get all the Angular Syncfusion<sup style="font-size:70%">&reg;</sup> package from npm [link]( https://www.npmjs.com/search?q=%40syncfusion%2Fej2-angular- ).
 
-Currently, Syncfusion provides two types of package structures for Angular components,
+Currently, Syncfusion<sup style="font-size:70%">&reg;</sup> provides two types of package structures for Angular components,
 1. Ivy library distribution package [format](https://v17.angular.io/guide/angular-package-format)
 2. Angular compatibility compiler(Angular’s legacy compilation and rendering pipeline) package.
 
 ### Ivy library distribution package
 
-Syncfusion Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
+Syncfusion<sup style="font-size:70%">&reg;</sup> Angular packages(`>=20.2.36`) has been moved to the Ivy distribution to support the Angular [Ivy](https://docs.angular.lat/guide/ivy) rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.
 
 Add [`@syncfusion/ej2-angular-interactive-chat`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48) package to the application.
 
@@ -63,7 +63,7 @@ npm install @syncfusion/ej2-angular-interactive-chat --save
 
 ### Angular compatibility compiled package(ngcc)
 
-For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion Angular components. To download the `ngcc` package use the below.
+For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components. To download the `ngcc` package use the below.
 
 Add [`@syncfusion/ej2-angular-interactive-chat@ngcc`](https://www.npmjs.com/package/@syncfusion/ej2-angular-interactive-chat/v/27.1.48-ngcc) package to the application.
 

ej2-angular/pdfviewer/accessibility.md

@@ -8,7 +8,7 @@ documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Accessibility in Syncfusion Angular PDF Viewer components
+# Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular PDF Viewer components
 
 The PDF Viewer component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
 
@@ -259,4 +259,4 @@ The accessibility compliance of the PDF Viewer component is shown in the followi
 
 ## See also
 
-* [Accessibility in Syncfusion Angular components](../common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Angular components](../common/accessibility)

ej2-angular/pdfviewer/annotation/free-text-annotation.md

@@ -351,7 +351,7 @@ Find the sample [how to move the free text annotation programmatically](https://
 
 ## Get the newly added free text annotation ID
 
-To get the ID of a newly added free text annotation in the Syncfusion PDF viewer, you can use the **annotationAdd()** event. This event is triggered whenever a new annotation is added to the PDF document, and it provides the annotationAddEventHandler object as a parameter. You can access the ID of the new annotation through the AnnotationID property of the annotationAddEventHandler object.
+To get the ID of a newly added free text annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer, you can use the **annotationAdd()** event. This event is triggered whenever a new annotation is added to the PDF document, and it provides the annotationAddEventHandler object as a parameter. You can access the ID of the new annotation through the AnnotationID property of the annotationAddEventHandler object.
 
 Here is an example of how you can use the **annotationAdd()** event to get the ID of a new free text annotation:
 
@@ -369,7 +369,7 @@ Find the sample [how to get the newly added free text annotation id](https://sta
 
 ## Change the content of an existing Free text annotation programmatically
 
-To change the content of an existing free text annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To change the content of an existing free text annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method to change the content of a free text annotation:
 

ej2-angular/pdfviewer/annotation/import-export-annotation.md

@@ -625,6 +625,194 @@ import { PdfViewerComponent, LinkAnnotationService, BookmarkViewService,
 
 >Run the [web service](https://github.com/SyncfusionExamples/EJ2-PDFViewer-WebServices/tree/main/ASP.NET%20Core/PdfViewerWebService_3.0) and then the angular code. Also note that, the XFDF file for importing the annotation should be placed in the location as specified in the GetDocumentPath method of the PdfViewerController.
 
+## Importing Annotation Using Base64 Data
+
+You can import annotations into the Syncfusion Angular PDF Viewer by decoding Base64-encoded JSON annotation data at runtime and passing the parsed object to the importAnnotation API, as shown in the following code snippet.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService, BookmarkViewService, MagnificationService,
+  ThumbnailViewService, ToolbarService, NavigationService,
+  TextSearchService, TextSelectionService, PrintService,
+  FormDesignerService, FormFieldsService, AnnotationService,
+  PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <!-- Button to trigger annotation import -->
+    <button (click)="fileInput.click()">Import Annotation</button>
+
+    <!-- Hidden file input (only JSON files allowed) -->
+    <input type="file" #fileInput accept=".json" style="display:none" (change)="onFileSelected($event)" />
+
+    <!-- PDF Viewer container -->
+    <div class="content-wrapper">
+      <ejs-pdfviewer id="pdfViewer"
+        [documentPath]="document"
+        [resourceUrl]="resource"
+        style="height:640px;display:block">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  // Register all necessary PDF viewer services
+  providers: [
+    LinkAnnotationService, BookmarkViewService, MagnificationService,
+    ThumbnailViewService, ToolbarService, NavigationService,
+    TextSearchService, TextSelectionService, PrintService,
+    AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService
+  ]
+})
+export class AppComponent implements OnInit {
+  // URL of the sample PDF document
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/handwritten-signature.pdf';
+
+  // Syncfusion PDF viewer resource URL
+  public resource: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';
+
+  ngOnInit(): void {}
+
+  /**
+   * Triggered when a file is selected from the input.
+   * Handles reading and importing the JSON annotation file.
+   */
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+
+    // Validate that the selected file is a .json file
+    if (!file || !file.name.endsWith('.json')) {
+      alert('Please select a valid JSON file.');
+      return;
+    }
+
+    const reader = new FileReader();
+
+    // When file reading is done
+    reader.onload = (e: any) => {
+      // Extract Base64 string (after the "data:application/json;base64," part)
+      const base64String = e.target.result.split(',')[1];
+
+      // Decode Base64 to original JSON string
+      const decodedJsonString = atob(base64String);
+
+      try {
+        // Parse the JSON string into a JavaScript object
+        const annotationData = JSON.parse(decodedJsonString);
+
+        // Get reference to the PDF viewer instance
+        const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+        // Import the parsed annotation data into the viewer
+        viewer.importAnnotation(annotationData);
+      } catch (err) {
+        // Handle errors (e.g., invalid JSON)
+        console.error('Invalid JSON file:', err);
+        alert('Failed to parse JSON.');
+      }
+    };
+
+    // Start reading the file as a data URL (Base64 encoded)
+    reader.readAsDataURL(file);
+  }
+}
+
+{% endhighlight %}
+{% highlight ts tabtitle="Server-Backed" %}
+
+import { Component, OnInit } from '@angular/core';
+import {
+  LinkAnnotationService, BookmarkViewService, MagnificationService,
+  ThumbnailViewService, ToolbarService, NavigationService,
+  TextSearchService, TextSelectionService, PrintService,
+  FormDesignerService, FormFieldsService, AnnotationService,
+  PageOrganizerService
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+  selector: 'app-root',
+  template: `
+    <!-- Button to trigger annotation import -->
+    <button (click)="fileInput.click()">Import Annotation</button>
+
+    <!-- Hidden file input (only JSON files allowed) -->
+    <input type="file" #fileInput accept=".json" style="display:none" (change)="onFileSelected($event)" />
+
+    <!-- PDF Viewer container -->
+    <div class="content-wrapper">
+      <ejs-pdfviewer id="pdfViewer"
+        [documentPath]="document"
+        [serviceUrl]="service"
+        style="height:640px;display:block">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  // Register all necessary PDF viewer services
+  providers: [
+    LinkAnnotationService, BookmarkViewService, MagnificationService,
+    ThumbnailViewService, ToolbarService, NavigationService,
+    TextSearchService, TextSelectionService, PrintService,
+    AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService
+  ]
+})
+export class AppComponent implements OnInit {
+  // URL of the sample PDF document
+  public document: string = 'https://cdn.syncfusion.com/content/pdf/handwritten-signature.pdf';
+
+  // Syncfusion PDF viewer resource URL
+  public service: string = 'https://services.syncfusion.com/angular/production/api/pdfviewer';
+
+  ngOnInit(): void {}
+
+  /**
+   * Triggered when a file is selected from the input.
+   * Handles reading and importing the JSON annotation file.
+   */
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+
+    // Validate that the selected file is a .json file
+    if (!file || !file.name.endsWith('.json')) {
+      alert('Please select a valid JSON file.');
+      return;
+    }
+
+    const reader = new FileReader();
+
+    // When file reading is done
+    reader.onload = (e: any) => {
+      // Extract Base64 string (after the "data:application/json;base64," part)
+      const base64String = e.target.result.split(',')[1];
+
+      // Decode Base64 to original JSON string
+      const decodedJsonString = atob(base64String);
+
+      try {
+        // Parse the JSON string into a JavaScript object
+        const annotationData = JSON.parse(decodedJsonString);
+
+        // Get reference to the PDF viewer instance
+        const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
+
+        // Import the parsed annotation data into the viewer
+        viewer.importAnnotation(annotationData);
+      } catch (err) {
+        // Handle errors (e.g., invalid JSON)
+        console.error('Invalid JSON file:', err);
+        alert('Failed to parse JSON.');
+      }
+    };
+
+    // Start reading the file as a data URL (Base64 encoded)
+    reader.readAsDataURL(file);
+  }
+}
+{% endhighlight %}
+{% endtabs %}
+
 ## Exporting annotation from the PDF document
 
 The PDF Viewer control provides the support to export the annotations as JSON file or JSON object and XFDF file using annotation toolbar.

ej2-angular/pdfviewer/annotation/ink-annotation.md

@@ -199,7 +199,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing Ink annotation programmatically
 
-To modify existing Ink annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing Ink annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/annotation/measurement-annotation.md

@@ -291,7 +291,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing measurement annotation programmatically
 
-To modify existing measurement annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing measurement annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/annotation/shape-annotation.md

@@ -288,7 +288,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing shape annotation programmatically
 
-To modify existing shape annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing shape annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/annotation/stamp-annotation.md

@@ -281,7 +281,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing sticky note annotation programmatically
 
-To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing sticky note annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/annotation/sticky-notes-annotation.md

@@ -126,7 +126,7 @@ export class AppComponent implements OnInit {
 
 ## Edit the existing sticky note annotation programmatically
 
-To modify existing sticky note annotation in the Syncfusion PDF viewer programmatically, you can use the **editAnnotation()** method.
+To modify existing sticky note annotation in the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF viewer programmatically, you can use the **editAnnotation()** method.
 
 Here is an example of how you can use the **editAnnotation()** method:
 

ej2-angular/pdfviewer/form-designer/create-programmatically.md

@@ -589,7 +589,7 @@ OnImportXml() {
 
 ## Form field properties
 
-Form field properties in Syncfusion PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion PDF Viewer and explains how to use them effectively.
+Form field properties in Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer allow you to customize and interact with form fields embedded within PDF documents. This documentation provides an overview of the form field properties supported by the Syncfusion<sup style="font-size:70%">&reg;</sup> PDF Viewer and explains how to use them effectively.
 
     * Textbox
     * Password