diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md
new file mode 100644
index 0000000000..15de612a6c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md
@@ -0,0 +1,218 @@
+---
+layout: post
+title: Document Handling in Angular Pdfviewer component | Syncfusion
+description: This page helps you to learn about how to Open PDF from URL, Base64, Blob, Stream, Cloud storage in Syncfusion Angular Pdfviewer component.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load Large PDF Files in Angular PDF Viewer
+
+This article explains how to efficiently load and view large PDF files using the Syncfusion Angular PDF Viewer. It includes recommended best practices and performance tips for documents ranging from **50 MB to 2 GB**.
+
+## Why Large PDFs Need Special Handling
+
+Large PDF files often contain thousands of embedded objects such as images, compressed streams, digital signatures, form fields, annotations, vector graphics, and complex page structures. Rendering such heavy documents requires more processing time and memory.
+
+The **Syncfusion PDF Viewer is fully optimized for these heavy workloads**, and it delivers excellent performance even when working with very large files.
+
+### Viewer Capability Highlights
+- **Smooth performance for PDFs up to 1 GB**
+- **Supports viewing files up to ~2 GB**
+- **1 GB PDFs typically load within 5–6 seconds**
+- **Optimized incremental page loading** for faster interaction
+
+Performance may vary if the user’s system is heavily loaded or low on available RAM. In such cases, enabling the recommended optimizations below ensures maximum performance.
+
+## Best Practices for Loading Large PDFs
+
+### 1. Load PDFs Using Blob (Recommended)
+
+Blob loading provides the fastest and most efficient performance for large PDFs.
+
+#### Why Blob Loading Is Better
+
+When a large PDF (for example, 1 GB) is loaded directly via `documentPath` (URL):
+
+- The browser must **download the full document first**
+- Only after the full download completes, the viewer starts parsing and rendering
+- This causes delay for large files
+
+But when the PDF is fetched as a **Blob**:
+
+- The file is downloaded first in an optimized stream
+- A Blob URL is created and passed to the viewer
+- The viewer can begin rendering faster
+- Improves load time, memory usage, and overall responsiveness
+
+#### Example: Load a PDF as Blob
+```js
+fetch('https://your-api/large-file.pdf')
+ .then(response => response.blob())
+ .then(blob => {
+ const blobUrl = URL.createObjectURL(blob);
+ viewer.load(blobUrl, null);
+ })
+ .catch(error => console.error('Error loading PDF:', error));
+```
+
+Blob loading is highly recommended for all PDFs above **200 MB**, especially when working with 500 MB – 1 GB files.
+
+### 2. Viewer Performance Range
+
+The Syncfusion PDF Viewer is optimized to handle:
+
+- **Up to 1 GB** → very smooth
+- **Up to ~2 GB**
+
+This suits enterprise workflows involving large engineering drawings, client records, scanned books, and multi‑page financial reports.
+
+### 3. Minimize Injected Modules
+
+The PDF Viewer internally uses background workers for text processing, thumbnail generation, image rendering, and metadata extraction. Disabling modules that are not needed helps reduce background activity and improves performance.
+
+#### 3.1 Text Search & Text Selection
+
+Modules:
+- [`Text Search`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/text-search)
+- [`Text Selection`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/text-selection)
+
+These features require **continuous background text extraction and indexing**.
+
+For large PDFs:
+
+- Text extraction runs longer
+- Consumes additional CPU and memory
+- Increases initial load time
+
+If these features are not required in your application:
+
+- Disable them to reduce background tasks
+- Improve page rendering speed
+- Provide a smoother experience for large documents
+
+#### 3.2 Thumbnail View & Organize Pages
+
+Modules:
+- [`Organize Pages`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/organize-pages/overview)
+- [`Thumbnail View`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/interactive-pdf-navigation/page-thumbnail)
+
+These rely on **background thumbnail rendering**, where the viewer renders small preview images of every page.
+For PDFs with hundreds or thousands of pages, this becomes heavy.
+
+If thumbnails or page reordering are not essential:
+
+- Disable these modules
+- Prevent background thumbnail rendering
+- Reduce memory usage
+- Improve navigation responsiveness
+
+#### Example (remove unnecessary modules)
+```js
+
+```
+
+### 4. Enable Local Storage for Large PDFs With Many Form Fields or Annotations
+
+PDFs with a high number of:
+
+- Form fields (textbox, dropdown, signatures, etc.)
+- Annotations (highlight, shapes, comments)
+
+require more storage for:
+
+- Field values
+- Annotation metadata
+- Interaction states
+- Undo/redo data
+
+Enabling local storage in the PDF Viewer can improve performance and smoothness when working with large files. This allows the viewer to cache document data locally, reducing repeated network requests and memory spikes.
+
+Use the [`enableLocalStorage`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#enablelocalstorage) property to control this behavior. When set to `true`, session data is stored in memory for the current session; when `false` (default), browser session storage is used.
+
+**How the viewer stores this data by default**
+
+By default, the viewer uses **sessionStorage** to store interactive session data. For heavy PDFs with many form fields/annotations, sessionStorage can get filled more quickly and may cause slower interactions or instability when navigating across many pages.
+
+**Why enabling localStorage helps**
+
+- Provides more storage capacity than session storage
+- Avoids storage overflow for annotation‑heavy PDFs
+- Improves saving/loading of form values
+- Enhances stability when navigating large documents
+- Reduces repeated processing for form/annotation‑heavy pages
+
+#### Enable Local Storage
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } 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 implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ public document: 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';
+
+ ngAfterViewInit(): void {
+ // Initialization code here if needed
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+This is highly recommended when working with legal documents, tax forms, interactive applications, or PDFs containing thousands of annotations.
+
+### 5. Reduce Unnecessary Background System Processes
+
+For the best large‑PDF experience:
+
+- Close unused applications
+- Avoid multiple heavy tasks running in parallel
+- Minimize other browser tabs
+- Avoid opening multiple large PDFs simultaneously
+
+This ensures the viewer receives enough system resources.
+
+## See Also
+
+- [Load PDF (GitHub Sample)](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/Save%20and%20Load)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md
new file mode 100644
index 0000000000..6bd3273dc0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md
@@ -0,0 +1,114 @@
+---
+layout: post
+title: Load Password Protected PDFs in Angular PDF Viewer | Syncfusion
+description: Learn how to open password-protected PDF files in the Syncfusion Angular PDF Viewer by providing the password in the documentPath object.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Load a Password-Protected PDF in Angular
+
+This article explains how to open password-protected PDF files in the Syncfusion Angular PDF Viewer. The viewer supports both user‑interactive loading (Open File dialog) and programmatic loading using APIs.
+
+## 1. Opening a Password-Protected PDF Using the **Open File** Dialog
+
+When the user selects a password-protected PDF using the built‑in **Open File** option:
+
+- The viewer detects that the document is encrypted
+
+
+
+- A **password input popup** is automatically displayed
+
+
+
+- The user enters the password
+
+- The document is decrypted and loaded
+
+No additional configuration or code is required.
+
+This approach works for all password-protected PDFs opened locally by the user.
+
+## 2. Opening a Password-Protected PDF Programmatically
+
+If you load a password-protected PDF from a URL or through custom logic, the viewer provides two behaviors depending on how the file is loaded.
+
+### 2.1 Load the Document Using `viewer.load(url, password)`
+
+You can directly pass the password in the [`load`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#load) method:
+
+```js
+viewer.load(
+ 'https://your-api/password-protected.pdf',
+ 'Password'
+);
+```
+
+- If the password is correct → the PDF loads immediately
+- If the password is incorrect → the viewer displays the incorrect password popup
+- If no password is provided → the password popup is shown automatically
+
+This is useful when the password is known beforehand.
+
+### 2.2 Loading a Password-Protected Document's URL Using `documentPath`
+
+If the [`documentPath`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#documentpath) points to a password-protected PDF:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ // Load URL for Password Protected Document
+ public document: 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';
+
+ ngAfterViewInit(): void {
+ // Initialization code here if needed
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+The viewer will:
+
+- Detect encryption
+- Show the **password popup automatically**
+- Allow the user to enter the correct password
+- Then load the PDF
+
+
+
+N> No password should be passed inside `documentPath`.
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md
new file mode 100644
index 0000000000..bcaa1989dd
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md
@@ -0,0 +1,258 @@
+---
+layout: post
+title: Preprocess PDF Document in Angular PDF Viewer | Syncfusion
+description: Learn how to preprocess PDF documents using Syncfusion PDF Library before displaying them in the Angular PDF Viewer.
+control: PDF Viewer
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Pre-process PDF Document Before Displaying in Angular PDF Viewer
+
+This section explains why preprocessing is useful, what operations you can perform using the Syncfusion PDF Library, and how to load the processed document in the Angular PDF Viewer.
+
+## Why Preprocessing Is Needed
+Preprocessing a PDF before sending it to the viewer helps you:
+- Reduce file size and improve load time
+- Merge multiple documents into one
+- Extract only required pages for faster loading
+- Flatten form fields and annotations for performance & security
+- Apply branding elements such as watermarks or stamps
+
+These enhancements ensure a better, faster, and more controlled viewing experience.
+
+## Merge PDF Documents
+### UI-Level Merging
+You can visually merge pages in the **Organize Pages** UI inside the PDF Viewer. Users can import another PDF, insert its pages into the current file, reorder pages, or delete unwanted pages.
+
+
+
+### Programmatically Merge PDFs
+Using the Syncfusion PDF Library, you can merge documents before loading them into the viewer.
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const document1 = await PdfDocument.load('file1.pdf');
+const document2 = await PdfDocument.load('file2.pdf');
+
+document1.merge(document2);
+const mergedBytes = await document1.save();
+```
+You can then load the merged PDF into the viewer using Blob or Base64.
+
+## Extract Pages
+### UI-Level Extraction
+Using the Viewer's [**Organize Pages**](../../organize-pages/overview) window, users can select and extract required pages and download them separately.
+
+
+
+### Programmatically Extract Pages
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const original = await PdfDocument.load('sample.pdf');
+const extracted = original.extractPages([2,3,4]);
+const resultBytes = await extracted.save();
+```
+This reduces file size and improves performance when loading large documents.
+
+## Flatten Form Fields & Annotations
+### Why Flattening Helps
+- Prevents users from editing form fields
+- Improves rendering speed
+- Ensures consistent appearance across all devices
+
+### Programmatic Flattening
+```js
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('form.pdf');
+doc.formFields.flattenAllFields();
+doc.annotations.flattenAllAnnotations();
+const bytes = await doc.save();
+```
+
+### Flatten on Load
+
+Use the following code-snippet, when you want uploaded PDFs to be flattened before they are loaded into the viewer.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ FormFieldsService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+import { PdfDocument } from '@syncfusion/ej2-pdf';
+import { UploaderModule } from '@syncfusion/ej2-angular-inputs';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule, UploaderModule],
+ template: `
+
+
+
+
+
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ AnnotationService,
+ FormFieldsService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+ @ViewChild('fileUpload') public uploader: any;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resourceUrl: string =
+ 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';
+
+ public toolbarSettings = {
+ showTooltip: true,
+ toolbarItems: [
+ { prefixIcon: 'e-icons e-folder', id: 'openPdf', tooltipText: 'Open File', align: 'left' },
+ 'PageNavigationTool',
+ 'MagnificationTool',
+ 'PanTool',
+ 'SelectionTool',
+ 'SearchOption',
+ 'PrintOption',
+ 'UndoRedoTool',
+ 'AnnotationEditTool',
+ 'FormDesignerEditTool',
+ 'CommentTool',
+ 'SubmitForm',
+ 'DownloadOption',
+ ],
+ };
+
+ ngAfterViewInit(): void {
+ // Initialize viewer
+ }
+
+ toolbarClick(args: any): void {
+ if (args.item && args.item.id === 'openPdf') {
+ document
+ .getElementsByClassName('e-file-select-wrap')[0]
+ .querySelector('button')
+ ?.click();
+ }
+ }
+
+ onSelect(args: any): void {
+ let validFiles = args.filesData;
+ if (validFiles.length === 0) {
+ args.cancel = true;
+ return;
+ }
+ if (!'.pdf'.includes(validFiles[0].type)) {
+ args.cancel = true;
+ return;
+ }
+
+ let file = validFiles[0].rawFile;
+ let reader = new FileReader();
+
+ reader.addEventListener('load', () => {
+ let base64Data = reader.result as string;
+ let pdf = base64Data.split(',')[1];
+ const doc = new PdfDocument(pdf);
+
+ // Flatten the annotation and form fields
+ doc.flatten = true;
+
+ var flattened = doc.save();
+ // Load the flattened PDF in PDF Viewer
+ this.pdfviewer.load(flattened, null);
+ });
+
+ reader.readAsDataURL(file);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+N> Refer to the [Flatten on Download](../annotation/flatten-annotation#how-to-flatten-annotations) section for more information about flattening documents on download.
+
+## Add Watermark or Stamp
+### UI-Level Stamps
+The PDF Viewer toolbar allows users to:
+- Add [standard stamps](../annotation/stamp-annotation#add-stamp-annotations-to-the-pdf-document) (Approved, Draft, etc.)
+- Insert [custom image stamps](../annotation/stamp-annotation#add-a-custom-stamp)
+
+
+
+### Programmatically Add a Watermark
+```js
+import { PdfDocument, PdfGraphics, PdfBrushes } from '@syncfusion/ej2-pdf';
+
+const doc = await PdfDocument.load('input.pdf');
+const page = doc.getPage(0);
+const g = page.graphics;
+
+g.drawString('CONFIDENTIAL', {
+ x: 150,
+ y: 300,
+ fontSize: 48,
+ brush: PdfBrushes.gray,
+ opacity: 0.3,
+ rotateAngle: 45
+});
+
+const outputBytes = await doc.save();
+```
+
+## How-To Guide: Load the Preprocessed PDF in the Viewer
+You can load the processed PDF using **Blob**, **Base64**, or a **URL**.
+
+### Load Using Blob (Recommended)
+```js
+fetch('/api/processed-pdf')
+ .then(res => res.blob())
+ .then(blob => {
+ const url = URL.createObjectURL(blob);
+ viewer.load(url);
+ });
+```
+Best for large or dynamically processed PDFs.
+
+### Load Using Base64
+```js
+viewer.load('data:application/pdf;base64,BASE64_STRING');
+```
+Use for small files.
+
+### Load Using URL
+```js
+viewer.load('https://yourdomain.com/files/doc.pdf');
+```
+Ideal for stored/static files.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md
new file mode 100644
index 0000000000..3285f4362c
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md
@@ -0,0 +1,283 @@
+---
+layout: post
+title: Retrieve the Loaded Document in Angular PDF Viewer | syncfusion
+description: Learn how to access the loaded PDF document instance in the Angular PDF Viewer using ViewChild and the documentLoad event.
+platform: document-processing
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Retrieve the Loaded Document Instance in Angular PDF Viewer
+
+This page explains how to access the Angular PDF Viewer instance using Angular's `@ViewChild` decorator, listen for the [`documentLoad`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#documentload) life-cycle event, and retrieve document information, page details, and metadata—so you can safely invoke viewer APIs after the PDF is loaded.
+
+## Explanation: Why access the loaded document instance?
+
+- The viewer instance (via **Angular ViewChild**) gives you a stable handle to call APIs such as [`zoom`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/magnification), [`print`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/print), [`download`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/download), and [`navigation`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/navigation).
+- The **document load event** (fires after the PDF is parsed and pages are ready) is the correct moment to read **document information** (title, author, page count, etc.) and **page metrics**, and to trigger post‑load UI logic.
+- Accessing the instance too early (before load completes) may cause null/undefined errors or incomplete information.
+
+## Reference: What you can access/call after load
+
+After the PDF is loaded you can:
+
+- **Read document information**: title, author, subject, keywords (metadata), page count.
+- **Read page details**: total pages, current page, page size(s).
+- **Call Viewer APIs** (typical examples):
+ - **Zoom / Fit**: `zoomTo(125)`; fit to page/width
+ - **Navigation**: go to a specific page
+ - **Interactions**: enable/disable features (based on injected services)
+ - **Export**: `download()`, `print()`
+
+> Always invoke these after the `documentLoad` event fires, or from user actions that occur after load. Guard calls with optional chaining or readiness flags.
+
+## How‑to: Get the instance with a ref and read details on load
+
+Below is a focused snippet showing:
+1) Creating a **ref** for the viewer,
+2) Wiring the **`documentLoad`** event, and
+3) Reading basic **document info** and **page count**, then calling **viewer APIs** safely.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ PrintService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
+
+
+
+ `,
+ providers: [
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ PrintService,
+ ],
+})
+export class AppComponent implements AfterViewInit {
+ @ViewChild('pdfViewer') public pdfviewer: any;
+
+ public document: 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';
+
+ ngAfterViewInit(): void {
+ // Component initialized
+ }
+
+ // Fires after the PDF is fully loaded and ready
+ onDocumentLoad(args: any): void {
+ // 1) Access the component instance
+ const viewer = this.pdfviewer;
+ if (!viewer) return;
+
+ // 2) Read loaded document details (shape depends on event payload/version)
+ console.log('documentLoad args:', args);
+
+ // 3) Call viewer APIs (after load)
+ const pageCount =
+ (viewer && viewer.pageCount) ||
+ (args && args.pageCount) ||
+ '(unknown)';
+ const documentName = (args && args.documentName) || '(unnamed)';
+ console.log(`Loaded: ${documentName}, pages: ${pageCount}`);
+
+ // Safe API calls after load
+ viewer.magnification?.zoomTo(200);
+ viewer.navigation?.goToPage(5);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Notes**
+- The event name is `documentLoad` (the callback receives load args).
+- The exact event args and public methods available on the component may vary with the package version and injected services. Use `console.log(args)` once to see what’s present in your build.
+- Always guard calls with optional chaining (e.g., `viewer?.magnification?.zoomTo(125)`).
+
+## Tutorial: End‑to‑End — Read metadata & call APIs after load
+
+This example demonstrates a complete flow:
+- Setting up a **viewer ref**
+- Subscribing to `documentLoad`
+- Extracting **metadata** and **pages**
+- Exposing **buttons** to call viewer APIs only after load
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
+import {
+ ToolbarService,
+ MagnificationService,
+ NavigationService,
+ PrintService,
+ TextSelectionService,
+ TextSearchService,
+ PdfViewerModule,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+interface DocumentInfo {
+ name: string;
+ pageCount?: number;
+ author?: string;
+ title?: string;
+}
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ template: `
+
`,
@@ -69,56 +208,45 @@ import {
PrintService
]
})
-export class AppComponent implements OnInit {
+export class AppComponent {
public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
- public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/28.1.33/dist/ej2-pdfviewer-lib';
+ public resourceUrl: string = 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
@ViewChild('pdfViewer')
public pdfViewerObj!: PdfViewerComponent;
- ngOnInit(): void { }
-}
+ enableTextSelection(): void {
+ if (this.pdfViewerObj) {
+ this.pdfViewerObj.enableTextSelection = true;
+ }
+ }
+ disableTextSelection(): void {
+ if (this.pdfViewerObj) {
+ this.pdfViewerObj.enableTextSelection = false;
+ }
+ }
+}
{% endhighlight %}
{% endtabs %}
-## Toggle Text Selection Dynamically
-
-To toggle text selection at runtime:
+N> When text selection is disabled, the viewer automatically switches to pan mode.
-1. Get a reference to the `PdfViewerComponent` using the `@ViewChild` decorator.
-2. Implement methods on the same component class to enable and disable text selection.
-3. Bind those methods to UI controls such as buttons.
+[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
-```html
-
-
-```
-```typescript
-// Enable text selection
-enableTextSelection(): void {
- if (this.pdfViewerObj) {
- this.pdfViewerObj.enableTextSelection = true;
- }
-}
+## Use cases and considerations
-// Disable text selection
-disableTextSelection(): void {
- if (this.pdfViewerObj) {
- this.pdfViewerObj.enableTextSelection = false;
- }
-}
-```
+- Document protection: Disable text selection to help prevent copying sensitive content.
+- Read-only documents: Provide a cleaner viewing experience by preventing selection.
+- Interactive apps: Toggle selection based on user roles or document states.
-## Use Cases and Considerations
+N> Text selection is enabled by default. Set `enableTextSelection` to `false` to disable it.
-- **Document Protection**: Disabling text selection helps prevent unauthorized copying of sensitive content.
-- **Read-only Documents**: In scenarios where documents are meant for viewing only, disabling text selection can provide a cleaner user experience.
-- **Interactive Applications**: Toggle text selection based on user roles or document states in complex applications.
-- **Accessibility**: Consider enabling text selection for accessibility purposes in public-facing applications.
+## Troubleshooting
-## Default Behavior
+If text selection remains active, ensure that the [`TextSelectionService`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textselection) is removed from the providers array or [`enableTextSelection`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#enabletextselection) is set to `false`.
-By default, text selection is enabled in the PDF Viewer. Set the `enableTextSelection` property to `false` explicitly if you want to disable this functionality.
+## See also
-[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to)
\ No newline at end of file
+- [Text Selection API reference](../text-selection/reference)
+- [Angular PDF Viewer events](../events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/copy-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/copy-pages.md
new file mode 100644
index 0000000000..9e5b56e2aa
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/copy-pages.md
@@ -0,0 +1,69 @@
+---
+layout: post
+title: Copy pages in Organize Pages in Angular PDF Viewer | Syncfusion
+description: Learn how to duplicate pages using the Organize Pages UI in the Angular PDF Viewer of Syncfusion Essential JS 2 and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Copy Pages in Angular PDF Viewer
+
+## Overview
+
+This guide explains how to duplicate pages within the current PDF using the Organize Pages UI.
+
+**Outcome**: Copied pages are inserted adjacent to the selection and included in exported PDFs.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed
+- PDF Viewer injected with `PageOrganizer` module
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to duplicate
+
+ - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Duplicate selected pages
+
+ - Click the **Copy Pages** button in the Organize Pages toolbar; duplicated pages are inserted to the right of the selected thumbnails.
+
+4. Duplicate multiple pages at once
+
+ - When multiple thumbnails are selected, the Copy action duplicates every selected page in order.
+
+ 
+
+5. Undo or redo changes
+
+ - Use **Undo** (Ctrl+Z) or **Redo** to revert or reapply recent changes.
+
+ 
+
+6. Persist duplicated pages
+
+ - Click **Save** or **Save As** to include duplicated pages in the saved/downloaded PDF.
+
+## Expected result
+
+- Selected pages are duplicated and included in the saved PDF.
+
+## Enable or disable Copy Pages button
+
+To enable or disable the **Copy Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-copy-option) for the guidelines.
+
+## Troubleshooting
+
+- If duplicates are not created: verify that the changes are persisted using **Save**.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/events.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/events.md
index d85a309112..8e9ea3f3d8 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/events.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/events.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Organize Pages Events in Angular PDF Viewer
-The PDF Viewer exposes events for tracking and responding to actions within the page organizer, enabling customization of page manipulation workflows.
+The PDF Viewer exposes events for the page organizer to track and respond to page manipulation actions (for example: rotate, rearrange, insert, delete, and copy).
## pageOrganizerSaveAs
@@ -24,33 +24,82 @@ The event arguments provide information about the save event:
- `downloadDocument`: A base64 string of the modified PDF document data.
- `cancel`: A boolean that, when set to `true`, prevents the default save action from proceeding.
-```typescript
-import { Component, ViewChild } from '@angular/core';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-angular-pdfviewer';
-
-PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer);
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+ PageOrganizerSaveAsEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
- template: `
-
- style="height:640px;display:block">
-
-
`
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
})
-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/23.2.6/dist/ej2-pdfviewer-lib';
- onPageOrganizerSaveAs(args: any): void {
- console.log('File Name is' + args.fileName);
- console.log('Document data' + args.downloadDocument);
- }
+export class AppComponent implements OnInit {
+ @ViewChild('pdfviewer')
+ public pdfviewerControl!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void {
+ // Initialization logic (if needed)
+ }
+
+ onPageOrganizerSaveAs(args: PageOrganizerSaveAsEventArgs): void {
+ console.log('File Name is' + args.fileName);
+ console.log('Document data' + args.downloadDocument);
+ }
}
-```
+
+{% endhighlight %}
+{% endtabs %}
## pageOrganizerZoomChanged
@@ -58,39 +107,88 @@ The `pageOrganizerZoomChanged` event is triggered when the zoom level of the pag
- This event is fired when the user interacts with the zoom slider in the page organizer. The `showImageZoomingSlider` property in `pageOrganizerSettings` must be set to `true` for the slider to be visible.
-
Event arguments:
- `previousZoom`: The previous zoom value.
- `currentZoom`: The current zoom value.
-```typescript
-import { Component, ViewChild } from '@angular/core';
-import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer } from '@syncfusion/ej2-angular-pdfviewer';
-
-PdfViewerComponent.Inject(Toolbar, Magnification, Navigation, LinkAnnotation, ThumbnailView, BookmarkView, TextSelection, Annotation, FormDesigner, FormFields, PageOrganizer);
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+
+import { Component, ViewChild, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+ PageOrganizerZoomChangedEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
- template: `
-
- style="height:640px;display:block">
-
-
`
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
})
-export class AppComponent {
- @ViewChild('pdfviewer', { static: true }) pdfviewer?: PdfViewerComponent;
+export class AppComponent implements OnInit {
+ @ViewChild('pdfviewer')
+ public pdfviewerControl!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';
- onPageOrganizerZoomChanged(args: any): void {
+ ngOnInit(): void {
+ // Initialization logic (if needed)
+ }
+
+ onPageOrganizerZoomChanged(args: PageOrganizerZoomChangedEventArgs): void {
console.log('Previous Zoom Value is' + args.previousZoom);
console.log('Current Zoom Value is' + args.currentZoom);
}
}
-```
+
+{% endhighlight %}
+{% endtabs %}
## Related event documentation
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md
index 44aca3f5cb..b5c67bad76 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/extract-pages.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Extract pages in Angular PDF Viewer
-The PDF Viewer component enables users to extract pages from a document using the Extract Pages option in the Organize Pages UI and to control extraction programmatically. The Extract Pages tool is available by default in Organize Pages.
+The PDF Viewer component provides an Extract Pages tool in the Organize Pages UI to export selected pages as a new PDF file. The Extract Pages tool is enabled by default.
## Extract Pages in Organize Pages
@@ -28,31 +28,31 @@ When selected, a secondary toolbar dedicated to extraction is displayed.
You can extract by typing page numbers/ranges or by selecting thumbnails.
1. Click Extract Pages in the Organize Pages panel.
-2. In the input box, enter the pages to extract. Supported formats include:
- - Single pages: 1,3,5
- - Ranges: 2-6
- - Combinations: 1,4,7-9
-3. Alternatively, select the page thumbnails you want instead of typing values.
-4. Click Extract to download the extracted pages as a new PDF. Click Cancel to close the tool.
+2. In the input box, enter pages to extract. Supported formats:
+ - Single pages: 1,3,5
+ - Ranges: 2-6
+ - Combinations: 1,4,7-9
+3. Alternatively, select the page thumbnails to extract instead of typing values.
+4. Click Extract to download the selected pages as a new PDF; click Cancel to close the tool.
-Note: Page numbers are 1-based (first page is 1). Invalid or out-of-range entries are ignored.
+Note: Page numbers are 1-based (the first page is 1). Invalid or out-of-range entries are ignored; only valid pages are processed. Consider validating input before extraction to ensure expected results.
## Extraction options (checkboxes)
-Two options appear in the secondary toolbar:
+The secondary toolbar provides two options:
-- **Delete Pages After Extracting:**
- - When enabled, the selected/entered pages are removed from the document opened in the viewer after the extraction completes. The extracted pages are still downloaded as a new file.
+- **Delete Pages After Extracting** — When enabled, the selected pages are removed from the currently loaded document after extraction; the extracted pages are still downloaded as a separate PDF.
-- **Extract Pages As Separate Files:**
- - When enabled, every selected page is exported as an individual PDF file. Ranges such as 2-4 export pages 2, 3, and 4 as separate PDFs.
+- **Extract Pages As Separate Files** — When enabled, each selected page is exported as an individual PDF (for example, selecting pages 3, 5, and 6 downloads 3.pdf, 5.pdf, and 6.pdf).
## Programmatic options and APIs
+You can control the Extract Pages experience via settings and invoke extraction through code.
+
### Enable/disable or show/hide Extract Pages
Use the `canExtractPages` API to enable or disable the Extract Pages option. When set to `false`, the Extract Pages tool is disabled in the toolbar. The default value is `true`.
@@ -61,8 +61,10 @@ Use the following code snippet to enable or disable the Extract Pages option:
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
+
import { Component, OnInit } from '@angular/core';
import {
+ PdfViewerModule,
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
@@ -72,25 +74,16 @@ import {
AnnotationService,
TextSearchService,
TextSelectionService,
+ PrintService,
FormFieldsService,
FormDesignerService,
- PrintService,
PageOrganizerService,
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
- template: `
-
+ `,
})
export class AppComponent implements OnInit {
+ @ViewChild('pdfviewer')
+ public pdfviewerControl!: PdfViewerComponent;
+
public document: 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';
ngOnInit(): void { }
-
onExtract() {
- const viewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
- // Extract pages 1 and 2
- const array = (viewer as any).extractPages('1,2');
- // Load the extracted pages back into the viewer
- (viewer as any).load(array,"");
+ // Extract pages 1 and 2
+ const array = (this.pdfviewerControl as any).extractPages('1,2');
+ // Load the extracted pages back into the viewer
+ (this.pdfviewerControl as any).load(array, "");
console.log(array);
}
}
+
{% endhighlight %}
{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/import-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/import-pages.md
new file mode 100644
index 0000000000..aa17ab7a43
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/import-pages.md
@@ -0,0 +1,62 @@
+---
+layout: post
+title: Import pages in Organize Pages in Angular PDF Viewer | Syncfusion
+description: How to import pages from another PDF into the current document using the Organize Pages UI in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Import pages using Organize Pages tool in Angular
+
+## Overview
+
+This guide explains how to import pages from another PDF into the current document using the **Organize Pages** UI in the EJ2 Angular PDF Viewer.
+
+**Outcome**: Imported pages appear as thumbnails and are merged into the original document when saved or exported.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed
+- PDF Viewer is injected with `PageOrganizer` service
+- [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) (server-backed) configured when required
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Start import
+
+ - Click **Import Document** and choose a valid PDF file from your local file system.
+
+3. Place imported pages
+
+ - Imported pages appear as thumbnails. If a thumbnail is selected, the imported pages are inserted to the right of the selection; otherwise they are appended at the start of the document.
+
+ 
+
+4. Persist changes
+
+ - Click **Save** or **Save As** (or download) to persist the merged document.
+
+## Expected result
+
+- Imported pages display as a single thumbnail in Organize Pages and are merged into the original PDF when saved or exported.
+
+## Enable or disable Import Pages button
+
+To enable or disable the **Import Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-import-option) for the guidelines.
+
+## Troubleshooting
+
+- **Import fails**: Ensure the selected file is a valid PDF and the browser file picker is permitted.
+- **Imported pages not visible**: Confirm that the import is persisted using **Save** or **Save As**.
+- **Import option disabled**: Ensure [`pageOrganizerSettings.canImport`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#canimport) is set to `true` to enable import option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md
new file mode 100644
index 0000000000..91cc5ad4c4
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/insert-blank-pages.md
@@ -0,0 +1,68 @@
+---
+layout: post
+title: Insert blank pages in Organize Pages Angular PDF Viewer | Syncfusion
+description: How to insert blank pages into a PDF using the Organize Pages UI in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Insert blank pages using the Organize Pages tool in Angular
+
+## Overview
+
+This guide describes inserting new blank pages into a PDF using the **Organize Pages** UI in the EJ2 Angular PDF Viewer.
+
+**Outcome**: A blank page is added at the chosen position and will appear in thumbnails and exports.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed
+- `PageOrganizer` services injected into `PdfViewerComponent`
+- [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) for server-backed mode configured as required
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the panel.
+
+2. Select insertion point
+
+ - Hover over the thumbnail before or after which you want the blank page added.
+
+3. Insert a blank page
+
+ - Click the **Insert Left** / **Insert Right** option and choose the position (Before / After). A new blank thumbnail appears in the sequence.
+
+ 
+
+4. Adjust and confirm
+
+ - Reposition or remove the inserted blank page if needed using drag-and-drop or delete options.
+
+5. Persist the change
+
+ - Click **Save** or **Save As** to include the blank page in the exported PDF.
+
+## Expected result
+
+- A blank page thumbnail appears at the chosen position and is present in any saved or downloaded PDF.
+
+## Enable or disable Insert Pages button
+
+To enable or disable the **Insert Pages** button in the page thumbnails, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-insert-option) for the guidelines
+
+## Troubleshooting
+
+- **Organize Pages button missing**: Verify `PageOrganizer` is included in `Inject` and `Toolbar` is enabled.
+- **Inserted page not saved**: Confirm [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) is configured for your selected processing mode.
+- **Insert options disabled**: Ensure [`pageOrganizerSettings.canInsert`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#caninsert) is set to `true` to enable insert option.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
+- [Remove pages in Organize Pages](./remove-pages)
+- [Reorder pages in Organize Pages](./remove-pages)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/mobile-view.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/mobile-view.md
index 07de562722..6be60daa8a 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/mobile-view.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/mobile-view.md
@@ -1,7 +1,7 @@
---
layout: post
title: Organize Pages in Mobile PDF Viewer Angular | Syncfusion
-description: Learn how to organize pages in the mobile PDF Viewer, including rotating, rearranging, inserting, deleting, and copying pages on mobile devices.
+description: Organize PDF pages in Angular mobile viewer—rotate, rearrange, add, remove, and duplicate pages easily on mobile devices.
platform: document-processing
control: PDF Viewer
documentation: ug
@@ -10,15 +10,15 @@ domainurl: ##DomainURL##
# Organize Pages in Mobile PDF Viewer Angular
-The PDF Viewer offers a mobile-responsive layout for the `Organize Pages` feature, ensuring a seamless experience on smaller devices. On mobile devices, the toolbar and navigation elements adapt to screen size to provide easy access to page management tools.
+The PDF Viewer provides a mobile-responsive layout for the `Organize Pages` feature, optimized for touch interactions on small screens. The toolbar and navigation adapt to the device viewport so page-management controls remain accessible on phones and tablets.
-## Mobile-Friendly Toolbar
+## Mobile-friendly toolbar
-In the mobile view, the `Organize Pages` toolbar is displayed at the bottom of the screen for easy one-handed access. The toolbar includes the same set of tools as the desktop version, such as insert, delete, and rotate, but with a mobile-optimized layout.
+In mobile view the `Organize Pages` toolbar appears at the bottom of the screen for easier one-handed access. The toolbar exposes the same tools as the desktop layout (insert, delete, rotate, etc.) in a touch-optimized arrangement.
## Context Menu for Page Operations
-To perform actions on a page thumbnail, tap and hold the thumbnail to open a context menu. This menu contains the available page operations:
+To perform actions on a page thumbnail, tap and hold (long-press) the thumbnail to open a context menu. This menu contains the available page operations:
* **Rotate Clockwise**: Rotate the selected page 90 degrees clockwise.
* **Rotate Counter-Clockwise**: Rotate the selected page 90 degrees counter-clockwise.
@@ -27,11 +27,10 @@ To perform actions on a page thumbnail, tap and hold the thumbnail to open a con
* **Delete Page**: Remove the selected page.
* **Select All**: Select all pages in the document.
-
-
+
## Rearranging Pages on Mobile
-To rearrange pages, tap and hold a page thumbnail to select it, then drag it to the desired position. A blue line will indicate the drop location.
+To rearrange pages, tap and hold a thumbnail to select it, then drag it to the desired position; a blue line indicates the drop location. Supported gestures include `tap`, `long-press` (open context menu), and `drag` (reorder). The layout adapts to portrait and landscape orientations to preserve usability on different devices.
-The mobile interface enables efficient PDF page management on handheld devices.
+The mobile interface enables efficient page management on phones and tablets without sacrificing the functionality available in the desktop viewer.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
index bc63717261..aaef5287a7 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/overview.md
@@ -10,14 +10,14 @@ domainurl: ##DomainURL##
# Organize pages in Angular PDF Viewer
-The Angular PDF Viewer component includes an Organize pages panel for preparing documents before sharing. Use it to tidy scanned files, reorder pages, and duplicate content without leaving the viewer.
+The Angular PDF Viewer includes an Organize Pages panel for preparing documents before sharing. Use this panel to reorder pages, correct orientation, insert or remove pages, and duplicate content without leaving the viewer.
-To open the Organize pages panel, load an editable document, ensure that the Organize Pages toolbar item is enabled, and select **Organize Pages** from the left vertical toolbar. The document must allow page-level edits (for example, it must not be password-protected or restricted); otherwise, the toolbar item is hidden.
+To open the Organize Pages panel, load a document and choose **Organize Pages** from the left vertical toolbar (when enabled).
-Check out the following video to learn how to organize pages in a PDF document with the React PDF Viewer.
+Check out the following video to learn how to organize pages in a PDF document with the Angular PDF Viewer.
{% youtube "https://www.youtube.com/watch?v=08kPdR0AZQk" %}
-The Organize pages panel supports the following actions:
+The Organize Pages panel supports the following actions:
* **Rotate pages**: Fix page orientation in 90-degree increments to correct scanned pages.
* **Rearrange pages**: Drag and drop thumbnails to update the reading order.
@@ -28,15 +28,14 @@ The Organize pages panel supports the following actions:
* **Select all pages**: Apply bulk actions, such as rotation or deletion, to every page.
* **Save updates**: Review changes in real time and use **Save** or **Save As** to download the revised document.
-Select **Save** to overwrite the current document, or **Save As** to download a new copy with the updated page order. Changes are shown in the panel and are applied only when the user selects **Save** or **Save As**; unsaved edits are discarded if the panel is closed without saving.
+After completing the changes, apply them by selecting **Save** to overwrite the current document or **Save As** to download a new copy that retains the updated page order.
For a full guide to Organize pages in Angular, see the feature landing page: [Organize pages in Angular PDF Viewer](./organize-pdf).
See also:
-- [UI interactions for Organize Pages](./organize-page/ui-interactions-organize-page)
-- [Toolbar items for Organize Pages](./organize-page/toolbar-organize-page)
-- [Programmatic support for Organize Pages](./organize-page/programmatic-support-for-organize-page)
-- [Organize Pages events](./organize-page/organize-pdf-events)
-- [Organize Pages in mobile view](./organize-page/organize-page-mobile-view)
+- [Toolbar customization for Organize Pages](./toolbar)
+- [Programmatic support for Organize Pages](./programmatic-support)
+- [Organize Pages events](./events)
+- [Organize Pages in mobile view](./mobile-view)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
index f3e9fe3f62..3bd7fdbf19 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/programmatic-support.md
@@ -10,257 +10,529 @@ domainurl: ##DomainURL##
# Programmatic Support for Organize Pages in Angular PDF Viewer control
-The PDF Viewer exposes programmatic APIs to manage page organization. Use these APIs to enable the page organizer, open or close the organizer dialog, and customize page-management behaviors from application code.
+The PDF Viewer exposes programmatic APIs for organizing pages so applications can integrate page-management workflows (for example: enable/disable organizer, open/close the organizer, and customize behavior). This section documents the available properties, methods, and settings used to control the Organize Pages experience.
## Enable or disable the page organizer
-Enable the page organizer using the `enablePageOrganizer` property. The default value is `true`.
+The page organizer feature can be enabled or disabled using the `enablePageOrganizer` property. By default, the page organizer is enabled.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- FormFieldsService, FormDesignerService, PageOrganizerService, PrintService
- } from '@syncfusion/ej2-angular-pdfviewer';
+import {
+ PdfViewerModule,
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
@Component({
- selector: 'app-container',
- template: `
+ `,
+})
+export class AppComponent implements OnInit {
+ public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ ngOnInit(): void { }
+}
{% endhighlight %}
{% endtabs %}
## Open the page organizer dialog
-Call the `openPageOrganizer` method on the viewer's `pageOrganizer` API to programmatically open the organizer dialog and access page-management tools.
+The `openPageOrganizer` method programmatically opens the page organizer dialog, providing access to page management tools.
-```html
-
-```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
-```ts
-import { Component, ViewChild } from '@angular/core';
-import { PdfViewerComponent } from '@syncfusion/ej2-angular-pdfviewer';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
- selector: 'app-container',
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+ ],
template: `
-
-
+
+
+
- `
+ `,
})
-export class AppComponent {
- @ViewChild('pdfViewer', { static: false }) public viewer!: PdfViewerComponent;
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfviewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void { }
+
public openPageOrganizer(): void {
- this.viewer.pageOrganizer.openPageOrganizer();
+ (this.pdfviewerControl as any).pageOrganizer.openPageOrganizer();
}
}
-```
+
+{% endhighlight %}
+{% endtabs %}
## Close the page organizer dialog
-Call the `closePageOrganizer` method on the viewer's `pageOrganizer` API to programmatically close the organizer dialog.
+The `closePageOrganizer` method programmatically closes the page organizer dialog.
-```html
-
-```
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
-```ts
-import { Component, ViewChild } from '@angular/core';
-import { PdfViewerComponent } from '@syncfusion/ej2-angular-pdfviewer';
+import { Component, ViewChild, OnInit } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
- selector: 'app-container',
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+ ],
template: `
-
-
+
+
+
- `
+ `,
})
-export class AppComponent {
- @ViewChild('pdfViewer', { static: false }) public viewer!: PdfViewerComponent;
+export class AppComponent implements OnInit {
+ @ViewChild('pdfViewer')
+ public pdfviewerControl!: PdfViewerComponent;
+
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+ public resource: string = 'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
+
+ ngOnInit(): void { }
+
public closePageOrganizer(): void {
- this.viewer.pageOrganizer.closePageOrganizer();
+ (this.pdfviewerControl as any).pageOrganizer.closePageOrganizer();
}
}
-```
+
+{% endhighlight %}
+{% endtabs %}
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/remove-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/remove-pages.md
new file mode 100644
index 0000000000..030afb13e0
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/remove-pages.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Remove pages using Organize Pages in Angular PDF Viewer | Syncfusion
+description: How to remove one or more pages from a PDF using the Organize Pages view in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Remove pages using the Organize Pages tool in Angular
+
+## Overview
+
+This guide shows how to delete single or multiple pages from a PDF using the **Organize Pages** UI in the EJ2 Angular PDF Viewer.
+
+**Outcome**: You will remove unwanted pages and save or download the updated PDF.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed in your project
+- Basic PDF Viewer setup ([`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) for standalone mode or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) for server-backed mode)
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer navigation toolbar to open the Organize Pages dialog.
+
+2. Select pages to remove
+
+ - Click a thumbnail to select a page. Use Shift+click or Ctrl+click to select multiple pages. Use the **Select all** button to select every page.
+
+3. Delete selected pages
+
+ - Click the **Delete Pages** icon in the Organize Pages toolbar to remove the selected pages. The thumbnails update immediately to reflect the deletion.
+
+ - Delete a single page directly from its thumbnail: hover over the page thumbnail to reveal the per-page delete icon, then click that icon to remove only that page.
+
+ 
+
+4. Multi-page deletion
+
+ - When multiple thumbnails are selected, the Delete action removes all selected pages at once.
+
+5. Undo or redo deletion
+
+ - Use **Undo** (Ctrl+Z) to revert the last deletion.
+ - Use **Redo** (Ctrl+Y) to revert the last undone deletion.
+
+ 
+
+6. Save the PDF after deletion
+
+ - Click **Save** to apply changes to the currently loaded document, or **Save As** / **Download** to download a copy with the removed pages permanently applied.
+
+## Expected result
+
+- Selected pages are removed from the document immediately in the Organize Pages dialog.
+- After clicking **Save** or **Save As**, the resulting PDF reflects the deletions.
+
+## Enable or disable Remove Pages button
+
+To enable or disable the **Remove Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-delete-option) for the guidelines.
+
+## Troubleshooting
+
+- **Delete button disabled**: Ensure `PageOrganizer` is injected and [`pageOrganizerSettings.canDelete`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#candelete) is not set to `false`.
+- **Selection not working**: Verify that the Organize Pages dialog has focus; use Shift+click for range selection.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/reorder-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/reorder-pages.md
new file mode 100644
index 0000000000..0db6e4c183
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/reorder-pages.md
@@ -0,0 +1,66 @@
+---
+layout: post
+title: Reorder pages in Organize Pages in Angular PDF Viewer | Syncfusion
+description: How to rearrange pages using drag-and-drop and grouping in the Organize Pages UI of the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Reorder pages using the Organize Pages view in Angular
+
+## Overview
+
+This guide describes how to rearrange pages in a PDF using the **Organize Pages** UI.
+
+**Outcome**: Single or multiple pages can be reordered and the new sequence is preserved when the document is saved or exported.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed
+- `Toolbar` and `PageOrganizer` services injected into the viewer
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the navigation toolbar to open the page thumbnails panel.
+
+2. Reorder a single page
+
+ - Drag a thumbnail to the desired position. The thumbnails update instantly to show the new order.
+
+3. Reorder multiple pages
+
+ - Select multiple thumbnails using Ctrl or Shift, then drag the selected group to the new location.
+
+ 
+
+4. Verify and undo
+
+ - Use **Undo** / **Redo** options to revert accidental changes.
+
+ 
+
+5. Persist the updated order
+
+ - Click **Save** or download the document using **Save As** to persist the new page sequence.
+
+## Expected result
+
+- Thumbnails reflect the new page order immediately and saved / downloaded PDFs preserve the reordered sequence.
+
+## Enable or disable reorder option
+
+To enable or disable the **Reorder pages** option in the Organize Pages, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rearrange-option) for the guidelines
+
+## Troubleshooting
+
+- **Thumbnails won't move**: Confirm [`pageOrganizerSettings.canRearrange`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#canrearrange) is is not set to `false`.
+- **Changes not saved**: Verify [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) (server) or [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) (standalone) is configured correctly.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/rotate-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/rotate-pages.md
new file mode 100644
index 0000000000..13321a8685
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/rotate-pages.md
@@ -0,0 +1,74 @@
+---
+layout: post
+title: Rotate pages in Organize Pages (Angular PDF Viewer) | Syncfusion
+description: Learn how to rotate one or more pages using the Organize Pages UI in the Syncfusion Angular PDF Viewer and more.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Rotate pages using the Organize Pages view in Angular
+
+## Overview
+
+This guide explains how to rotate individual or multiple pages using the **Organize Pages** UI in the EJ2 Angular PDF Viewer. Supported rotations: 90°, 180°, 270° clockwise and counter-clockwise.
+
+**Outcome**: Pages are rotated in the viewer and persisted when saved or exported.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed
+- PDF Viewer configured with [`resourceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#resourceurl) (standalone) or [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) (server-backed)
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the Organize Pages dialog.
+
+2. Select pages to rotate
+
+ - Click a single thumbnail or use Shift+click/Ctrl+click to select multiple pages.
+
+3. Rotate pages using toolbar buttons
+
+ - Use **Rotate Right** to rotate 90° clockwise.
+ - Use **Rotate Left** to rotate 90° counter-clockwise.
+ - Repeat the action to achieve 180° or 270° rotations.
+
+ 
+
+4. Rotate multiple pages at once
+
+ - When multiple thumbnails are selected, the Rotate action applies to every selected page.
+
+5. Undo or reset rotation
+
+ - Use **Undo** (Ctrl+Z) to revert the last rotation.
+ - Use the reverse rotation button (Rotate Left/Rotate Right) until the page returns to 0°.
+
+ 
+
+6. Persist rotations
+
+ - Click **Save** or **Save As** to persist rotations in the saved/downloaded PDF. Exporting pages also preserves the new orientation.
+
+## Expected result
+
+- Pages rotate in-place in the Organize Pages dialog when using the rotate controls.
+- Saving or exporting the document preserves the new orientation.
+
+## Enable or disable Rotate Pages button
+
+To enable or disable the **Rotate Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#enable-or-disable-the-rotate-option) for the guidelines
+
+## Troubleshooting
+
+- **Rotate controls disabled**: Ensure [`pageOrganizerSettings.canRotate`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#canrotate) is not set to `false`.
+- **Rotation not persisted**: Click **Save** after rotating. For server-backed setups ensure [`serviceUrl`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#serviceurl) is set so server-side save can persist changes.
+
+## Related topics
+
+- [Organize page toolbar customization](./toolbar.md)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/toolbar.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/toolbar.md
index 20aeeb8107..f481928946 100644
--- a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/toolbar.md
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/toolbar.md
@@ -10,217 +10,395 @@ domainurl: ##DomainURL##
# Organize Page Toolbar Customization in Angular PDF Viewer control
-The PDF Viewer allows you to customize the toolbar for the organize pages feature, enabling you to show or hide specific tools based on your application's requirements. The `pageOrganizerSettings` API provides properties to control the visibility of each tool in the organize pages dialog.
+The PDF Viewer lets applications customize the Organize Pages toolbar to enable or disable tools according to project requirements. Use the `pageOrganizerSettings` API to control each tool's interactivity and behavior.
## Show or hide the insert option
-The `canInsert` property controls the visibility of the insert tool. When set to `false`, the insert tool will be hidden from the toolbar.
+The `canInsert` property controls the insert tool visibility. Set it to `false` to disable the insert tool.
{% tabs %}
{% highlight ts tabtitle="Standalone" %}
import { Component, OnInit } from '@angular/core';
-import { LinkAnnotationService, BookmarkViewService, MagnificationService,
- ThumbnailViewService, ToolbarService, NavigationService,
- TextSearchService, AnnotationService, TextSelectionService,
- PrintService, PageOrganizerService
- } from '@syncfusion/ej2-angular-pdfviewer';
+import {
+ PdfViewerModule,
+ LinkAnnotationService,
+ BookmarkViewService,
+ MagnificationService,
+ ThumbnailViewService,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ AnnotationService,
+ FormFieldsService,
+ FormDesignerService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
@Component({
- selector: 'app-container',
- // specifies the template string for the PDF Viewer component
- template: `
+ `,
+})
+export class AppComponent implements OnInit {
+ public service: string = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
+ public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ ngOnInit(): void { }
+}
{% endhighlight %}
{% endtabs %}
-## Show or hide the Copy option
+## Enable or disable the copy option
+
+The `canCopy` property controls the copy tool interaction. Set it to `false` to disable the copy tool.
+
+## Enable or disable the import option
-The `canCopy` property controls the visibility of the copy tool. When set to `false`, the copy tool will be hidden.
+The `canImport` property controls the import tool interaction. Set it to `false` to disable the import tool.
-## Show or hide the import option
+## Enable or disable the rearrange option
-The `canImport` property controls the visibility of the import tool. When set to `false`, the import tool will be hidden.
+The `canRearrange` property controls whether pages can be rearranged. Set it to `false` to disable page reordering.
-## Show or hide the rearrange option
+## Show or hide the zoom pages option
-The `canRearrange` property controls the ability to rearrange pages. When set to `false`, pages cannot be rearranged.
+The `showImageZoomingSlider` property controls the zooming tool visibility. Set it to `false` to hide the zoom page tool.
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/zoom-pages.md b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/zoom-pages.md
new file mode 100644
index 0000000000..5c117060a1
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/organize-pages/zoom-pages.md
@@ -0,0 +1,60 @@
+---
+layout: post
+title: Zoom pages in Organize Pages in Angular PDF Viewer | Syncfusion
+description: How to adjust thumbnail zoom levels inside the Organize Pages UI of the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: PDF Viewer
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Zoom pages using the Organize Pages tool in Angular
+
+## Overview
+
+This guide explains how to change the thumbnail zoom level in the **Organize Pages** UI so you can view more detail or an overview of more pages.
+
+**Outcome**: Page thumbnails resize interactively to suit your task.
+
+## Prerequisites
+
+- EJ2 Angular PDF Viewer installed
+- `Toolbar` and `PageOrganizer` services injected in PDF Viewer
+- [`pageOrganizerSettings.showImageZoomingSlider`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#showimagezoomingslider) is set to `true`
+
+## Steps
+
+1. Open the Organize Pages view
+
+ - Click the **Organize Pages** button in the viewer toolbar to open the thumbnails panel.
+
+2. Locate the zoom control
+
+ - Find the thumbnail zoom slider in the Organize Pages toolbar.
+
+3. Adjust zoom
+
+ - Drag the slider to increase or decrease thumbnail size.
+
+ 
+
+4. Choose an optimal zoom level
+
+ - Select a zoom level that balances page detail and the number of visible thumbnails for your task.
+
+## Expected result
+
+- Thumbnails resize interactively; larger thumbnails show more detail while smaller thumbnails allow viewing more pages at once.
+
+## Show or hide Zoom Pages button
+
+To enable or disable the **Zoom Pages** button in the Organize Pages toolbar, update the [`pageOrganizerSettings`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettings). See [Organize pages toolbar customization](./toolbar#show-or-hide-the-zoom-pages-option) for the guidelines
+
+## Troubleshooting
+
+- **Zoom control not visible**: Confirm [`pageOrganizerSettings.showImageZoomingSlider`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/pageorganizersettingsmodel#showimagezoomingslider) is set to `true`.
+
+## Related topics
+
+- [Organize pages toolbar customization](./toolbar)
+- [Organize pages event reference](./events)
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/text-search/find-text.md b/Document-Processing/PDF/PDF-Viewer/angular/text-search/find-text.md
new file mode 100644
index 0000000000..d287d30e87
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/text-search/find-text.md
@@ -0,0 +1,422 @@
+---
+layout: post
+title: Find Text in Angular PDF Viewer control | Syncfusion
+description: Learn how to configure text search using find text and run programmatic searches in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: Text search
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Find Text in Angular PDF Viewer
+
+## Find text method
+
+Use the [`findText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtext) method to locate a string or an array of strings and return the bounding rectangles for each match. Optional parameters support case-sensitive comparisons and page scoping so you can retrieve coordinates for a single page or the entire document.
+
+### Find and get the bounds of a text
+
+Searches for the specified text within the document and returns the bounding rectangles of the matched text. The search can be case-sensitive based on the provided parameter and returns matches from all pages in the document. The following code snippet shows how to get the bounds of the specified text:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+{% raw %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ findText(): void {
+ console.log(this.pdfviewerObj.textSearch.findText('pdf', false));
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Find and get the bounds of a text on the desired page
+
+Searches for the specified text within the document and returns the bounding rectangles of the matched text on a specific page. The search can be case-sensitive based on the provided parameter and returns matches only from the selected page. The following code snippet shows how to retrieve bounds for the specified text on a selected page:
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+{% raw %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ findText(): void {
+ console.log(this.pdfviewerObj.textSearch.findText('pdf', false, 7));
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Find and get the bounds of the list of text
+
+Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters and returns matches from all pages in the document where the strings were found.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+{% raw %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ findText(): void {
+ console.log(this.pdfviewerObj.textSearch.findText(['adobe', 'pdf'], false),2);
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Find and get the bounds of the list of text on desired page
+
+Searches for an array of strings within the document and returns the bounding rectangles for each occurrence. The search can be case-sensitive based on the provided parameters. It returns the bounding rectangles for these search strings on that particular page where the strings were found.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+{% raw %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ findText(): void {
+ console.log(this.pdfviewerObj.textSearch.findText(['adobe', 'pdf'], false, 7));
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/react-pdf-viewer-examples)
+
+## Find text with findTextAsync
+
+The [`findTextAsync`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/text-search#findtextasync) method is designed for performing an asynchronous text search within a PDF document. You can use it to search for a single string or multiple strings, with the ability to control case sensitivity. By default, the search is applied to all pages of the document. However, you can adjust this behavior by specifying the page number (pageIndex), which allows you to search only a specific page if needed.
+
+### Find text with findTextAsync in Angular PDF Viewer
+
+The [`findTextAsync`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/text-search#findtextasync) method searches for a string or array of strings asynchronously and returns bounding rectangles for each match. Use it to locate text positions across the document or on a specific page.
+
+Here is an example of how to use [`findTextAsync`](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/text-search#findtextasync):
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+{% raw %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ type SearchResultModel,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ async findText(): Promise {
+ const result: SearchResultModel[] = await this.pdfviewerObj.textSearch.findTextAsync('pdf', false);
+ console.log(result);
+ }
+
+ async findTexts(): Promise {
+ const result: Record = await this.pdfviewerObj.textSearch.findTextAsync(['pdf', 'adobe'], false);
+ console.log(result);
+ }
+}
+{% endraw %}
+{% endhighlight %}
+{% endtabs %}
+
+### Parameters
+
+**text (string | string[]):** The text or array of texts to search for in the document.
+
+**matchCase (boolean):** Whether the search is case-sensitive. `true` matches exact case; `false` ignores case.
+
+**pageIndex (optional, number):** Zero-based page index to search. If omitted, searches all pages.
+
+N> `pageIndex` is zero-based; specify `0` for the first page. Omit this parameter to search the entire document.
+
+### Example workflow
+
+**findTextAsync('pdf', false):**
+This will search for the term "pdf" in a case-insensitive manner across all pages of the document.
+
+**findTextAsync(['pdf', 'the'], false):**
+This will search for the terms "pdf" and "the" in a case-insensitive manner across all pages of the document.
+
+**findTextAsync('pdf', false, 0):**
+This will search for the term "pdf" in a case-insensitive manner only on the first page (page 0).
+
+**findTextAsync(['pdf', 'the'], false, 1):**
+This will search for the terms "pdf" and "the" in a case-insensitive manner only on the second page (page 1).
+
+[View sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples/tree/master/How%20to/)
+
+## See Also
+
+- [Text Search Features](./text-search-features)
+- [Text Search Events](./text-search-events)
+- [Extract Text](../how-to/extract-text)
+- [Extract Text Options](../how-to/extract-text-option)
+- [Extract Text Completed](../how-to/extract-text-completed)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/text-search/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/text-search/overview.md
new file mode 100644
index 0000000000..d33f3e520b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/text-search/overview.md
@@ -0,0 +1,35 @@
+---
+layout: post
+title: Text search and Extraction in Angular PDF Viewer | Syncfusion
+description: Overview of text search capabilities, UI features, programmatic APIs, events and text extraction in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: Text search
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text search and extraction in Angular PDF Viewer
+
+The Angular PDF Viewer provides an integrated text search experience that supports both interactive UI search and programmatic searches. Enable the feature by importing [`TextSearch`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch) and injecting it into the viewer services and by setting [`enableTextSearch`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#enabletextsearch) as needed. To give more low-level information about text, [`findText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtext) and [`findTextAsync`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtextasync) methods can be used.
+
+The [`extractText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#extracttext) API can be used to retrieve plain text from pages or structured text items with their positional bounds, allowing you to index document content, perform precise programmatic highlighting, map search results to coordinates, and create custom overlays or annotations; it can return full-page text or itemized fragments with bounding rectangles for each extracted element, enabling integration with search, analytics, and downstream processing workflows.
+
+## Key capabilities
+
+- **Text search UI**: real‑time suggestions while typing, selectable suggestions from the popup, match‑case and "match any word" options, and search navigation controls.
+- **Text search programmatic APIs**: mirror UI behavior with [`searchText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchtext), [`searchNext`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchnext), [`searchPrevious`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchprevious), and [`cancelTextSearch`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#canceltextsearch); query match locations with [`findText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtext) and [`findTextAsync`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtextasync) which return bounding rectangles for matches.
+- **Text extraction**: use [`extractText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#extracttext) to retrieve page text and, optionally, positional bounds for extracted items (useful for indexing, custom highlighting, and annotations).
+- **Text search events**: respond to [`textSearchStart`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#textsearchstart), [`textSearchHighlight`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#textsearchhighlight), and [`textSearchComplete`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#textsearchcomplete) for UI sync, analytics, and custom overlays.
+
+## When to use which API
+
+- Use the toolbar/search panel for typical interactive searches and navigation.
+- Use [`searchText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchtext) / [`searchNext`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchnext) / [`searchPrevious`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchprevious) when driving search programmatically but keeping behavior consistent with the UI.
+- Use [`findText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtext) / [`findTextAsync`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#findtextasync) when you need match coordinates (bounding rectangles) for a page or the whole document.
+- Use [`extractText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#extracttext) when you need plain page text or structured text items with bounds.
+
+## Further reading
+
+- [Find Text](./find-text)
+- [Text Search Features](./text-search-features)
+- [Text Search Events](./text-search-events)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/text-search/text-search-events.md b/Document-Processing/PDF/PDF-Viewer/angular/text-search/text-search-events.md
new file mode 100644
index 0000000000..bfe2ecd217
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/text-search/text-search-events.md
@@ -0,0 +1,248 @@
+---
+layout: post
+title: Text search Events in Angular PDF Viewer control | Syncfusion
+description: Learn how to handle text search events, and run programmatic searches in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: Text search
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text Search Events in Angular PDF Viewer
+
+The Angular PDF Viewer triggers events during text search operations, allowing you to customize behavior and respond to different stages of the search process.
+
+## textSearchStart
+
+The [textSearchStart](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#textsearchstart) event fires as soon as a search begins from the toolbar interface or through the [`textSearch.searchText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchtext) method. Use to reset UI state, log analytics, or cancel the default search flow before results are processed.
+
+- Event arguments: [TextSearchStartEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearchStartEventArgs) exposes:
+ - `searchText`: the term being searched.
+ - `matchCase`: indicates whether case-sensitive search is enabled.
+ - `name`: event name.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ type TextSearchStartEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ onTextSearchStart(args: TextSearchStartEventArgs): void {
+ console.log(`Text search started for: "${args.searchText}"`);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## textSearchHighlight
+
+The [textSearchHighlight](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#textsearchhighlight) event triggers whenever a search result is brought into view, including navigation between matches. Use to draw custom overlays or synchronize adjacent UI elements when a match is highlighted.
+
+- Event arguments: [TextSearchHighlightEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearchHighlightEventArgs) exposes:
+ - `bounds`: `RectangleBoundsModel` representing the highlighted match.
+ - `pageNumber`: page index where the match is highlighted.
+ - `searchText`: the active search term.
+ - `matchCase`: indicates whether case-sensitive search was used.
+ - `name`: event name.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ type TextSearchHighlightEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ onTextSearchHighlight(args: TextSearchHighlightEventArgs): void {
+ console.log('Highlighted match bounds:', args.bounds);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## textSearchComplete
+
+The [textSearchComplete](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer#textsearchcomplete) event runs after the search engine finishes scanning the document for the current query. Use to update match counts, toggle navigation controls, or notify users when no results were found.
+
+- **Typical uses**:
+ - Update UI with the total number of matches and enable navigation controls.
+ - Hide loading indicators or show a "no results" message if none were found.
+ - Record analytics for search effectiveness.
+- **Event arguments**: [TextSearchCompleteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearchCompleteEventArgs) exposes:
+ - `searchText`: the searched term.
+ - `matchCase`: indicates whether case-sensitive search was used.
+ - `name`: event name.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ type TextSearchCompleteEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ onTextSearchComplete(args: TextSearchCompleteEventArgs): void {
+ console.log('Text search completed.', args);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See Also
+
+- [Text Search Features](./text-search-features)
+- [Find Text](./find-text)
+- [Extract Text](../how-to/extract-text)
+- [Extract Text Options](../how-to/extract-text-option)
+- [Extract Text Completed](../how-to/extract-text-completed)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/text-search/text-search-features.md b/Document-Processing/PDF/PDF-Viewer/angular/text-search/text-search-features.md
new file mode 100644
index 0000000000..7600d5fdbc
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/text-search/text-search-features.md
@@ -0,0 +1,271 @@
+---
+layout: post
+title: Text search in Angular PDF Viewer Component | Syncfusion
+description: Learn how to configure text search and run programmatic searches in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: Text search
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text search in Angular PDF Viewer
+
+The text search feature in the Angular PDF Viewer locates and highlights matching content within a document. Enable or disable this capability with the following configuration.
+
+
+
+N> The text search functionality requires importing TextSearch and adding it to PdfViewerModule. Otherwise, the search UI and APIs will not be accessible.
+
+## Text search features in UI
+
+### Real-time search suggestions while typing
+
+Typing in the search box immediately surfaces suggestions that match the entered text. The list refreshes on every keystroke so users can quickly jump to likely results without completing the entire term.
+
+
+
+### Select search suggestions from the popup
+
+After typing in the search box, the popup lists relevant matches. Selecting an item jumps directly to the corresponding occurrence in the PDF.
+
+
+
+### Dynamic Text Search for Large PDF Documents
+
+Dynamic text search is enabled during the initial loading of the document when the document text collection has not yet been fully loaded in the background.
+
+
+
+### Search text with the Match Case option
+
+Enable the Match Case checkbox to limit results to case-sensitive matches. Navigation commands then step through each exact match in sequence.
+
+
+
+### Search text without Match Case
+
+Leave the Match Case option cleared to highlight every occurrence of the query, regardless of capitalization, and navigate through each result.
+
+
+
+### Search a list of words with Match Any Word
+
+Enable Match Any Word to split the query into separate words. The popup proposes matches for each word and highlights them throughout the document.
+
+
+
+## Programmatic text Search
+
+The Angular PDF Viewer provides options to toggle text search feature and APIs to customize the text search behavior programmatically.
+
+### Enable or Disable Text Search
+
+Use the following snippet to enable or disable text search features
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+}
+{% endhighlight %}
+{% endtabs %}
+
+### Programmatic text search
+
+While the PDF Viewer toolbar offers an interactive search experience, you can also trigger and customize searches programmatically by calling the following APIs in textSearch module.
+
+#### `searchText`
+
+Use the [`searchText`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textsearch#searchtext) method to start a search with optional filters that control case sensitivity and whole-word behavior.
+
+```ts
+// searchText(text: string, isMatchCase?: boolean)
+this.pdfviewerObj.textSearch.searchText('search text', false);
+```
+
+Set the `isMatchCase` parameter to `true` to perform a case-sensitive search that mirrors the Match Case option in the search panel.
+
+```ts
+// This will only find instances of "PDF" in uppercase.
+this.pdfviewerObj.textSearch.searchText('PDF', true);
+```
+
+#### `searchNext`
+
+[`searchNext`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearch#searchnext) method searches the next occurrence of the current query from the active match.
+
+```ts
+// searchText(text: string, isMatchCase?: boolean)
+this.pdfviewerObj.textSearch.searchNext();
+```
+
+#### `searchPrevious`
+
+[`searchPrevious`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearch#searchprevious) API searches the previous occurrence of the current query from the active match.
+
+```ts
+// searchText(text: string, isMatchCase?: boolean)
+this.pdfviewerObj.textSearch.searchPrevious();
+```
+
+#### `cancelTextSearch`
+
+[`cancelTextSearch`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/textSearch#canceltextsearch) method cancels the current text search and removes the highlighted occurrences from the PDF Viewer.
+
+```ts
+// searchText(text: string, isMatchCase?: boolean)
+this.pdfviewerObj.textSearch.cancelTextSearch();
+```
+
+#### Complete Example
+
+Use the following code snippet to implement text search using SearchText API
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+
+
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ searchText(): void {
+ this.pdfviewerObj.textSearch.searchText('pdf', false);
+ }
+
+ previousSearch(): void {
+ this.pdfviewerObj.textSearch.searchPrevious();
+ }
+
+ nextSearch(): void {
+ this.pdfviewerObj.textSearch.searchNext();
+ }
+
+ cancelSearch(): void {
+ this.pdfviewerObj.textSearch.cancelTextSearch();
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Expected result:** the viewer highlights occurrences of `pdf` and navigation commands jump between matches.
+
+[View Sample in GitHub](https://github.com/SyncfusionExamples/angular-pdf-viewer-examples)
+
+## See also
+
+- [Find Text](./find-text)
+- [Text Search Events](./text-search-events)
+- [Extract Text](../how-to/extract-text)
+- [Extract Text Options](../how-to/extract-text-option)
+- [Extract Text Completed](../how-to/extract-text-completed)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/text-selection/overview.md b/Document-Processing/PDF/PDF-Viewer/angular/text-selection/overview.md
new file mode 100644
index 0000000000..c375319e0b
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/text-selection/overview.md
@@ -0,0 +1,50 @@
+---
+layout: post
+title: Text selection in Angular PDF Viewer | Syncfusion
+description: Learn the text selection concepts, copy behavior, and interaction capabilities of the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: Text selection
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text selection in Angular PDF Viewer
+
+The Text Selection module in the Syncfusion Angular PDF Viewer enables users to select and copy text from a loaded PDF document. Text selection is available by default and gives users direct interaction with the content through dragging, keyboard shortcuts, and context menus.
+
+This overview explains the behavior of text selection, how copy actions work, and how it relates to other interaction features in the viewer.
+
+## Capabilities of text selection
+
+Text selection allows users to:
+
+- Highlight text using mouse or touch
+- Copy the selected text to the clipboard
+- Access contextual commands such as Copy through the built‑in context menu
+- Use keyboard shortcuts such as Ctrl+C or Cmd+C to copy text
+- Trigger application behavior through selection events
+
+The feature behaves consistently across single-page and multi-page documents.
+
+## Copying text
+
+Copying is available through several user interaction methods.
+
+### Using the context menu
+
+When text is selected, the built‑in context menu shows a Copy option. Selecting this option copies the highlighted text to the clipboard. See the [context menu](../context-menu/builtin-context-menu.md#text-menu-items) documentation for further explanation.
+
+### Using keyboard shortcuts
+
+The following keyboard shortcuts copy the selected text:
+
+- Ctrl+C (Windows and Linux)
+- Cmd+C (macOS)
+
+## Related topics
+
+These topics describe how selection interacts with other features or how copy behavior may be limited depending on viewer configuration or PDF security settings.
+
+- [Restricting copy operations (permissions)](../security/prevent-copy-and-print)
+- [Toggle text selection](./toggle-text-selection)
+- [Text selection API reference](./reference)
\ No newline at end of file
diff --git a/Document-Processing/PDF/PDF-Viewer/angular/text-selection/text-selection-api-events.md b/Document-Processing/PDF/PDF-Viewer/angular/text-selection/text-selection-api-events.md
new file mode 100644
index 0000000000..f2037cde96
--- /dev/null
+++ b/Document-Processing/PDF/PDF-Viewer/angular/text-selection/text-selection-api-events.md
@@ -0,0 +1,218 @@
+---
+layout: post
+title: Text selection API and events in Angular PDF Viewer | Syncfusion
+description: Reference documentation for text selection properties, methods, and events in the Syncfusion Angular PDF Viewer.
+platform: document-processing
+control: Text selection
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Text selection API and events in Angular PDF Viewer
+
+This document provides the reference details for text selection APIs and events in the Syncfusion Angular PDF Viewer. It includes the available configuration property, programmatic methods, and event callbacks that allow applications to react to selection behavior.
+
+## Methods
+
+### selectTextRegion
+
+Programmatically selects text within a specified page and bounds.
+
+**Method signature:**
+
+```ts
+selectTextRegion(pageNumber: number, bounds: IRectangle[]): void
+```
+
+**Parameters:**
+
+- pageNumber: number indicating the target page (1 based indexing)
+- bounds: `IRectangle` array defining the selection region
+
+**Example:**
+
+```ts
+this.pdfviewerObj.textSelection.selectTextRegion(3, [{
+ "left": 121.07501220703125,
+ "right": 146.43399047851562,
+ "top": 414.9624938964844,
+ "bottom": 430.1625061035156,
+ "width": 25.358978271484375,
+ "height": 15.20001220703125
+ }
+])
+```
+
+### copyText
+
+Copies the currently selected text to the clipboard.
+
+**Method signature:**
+
+```ts
+copyText(): void
+```
+
+**Example:**
+
+```ts
+this.pdfviewerObj.textSelection.copyText();
+```
+
+## Events
+
+### textSelectionStart
+
+Triggered when the user begins selecting text.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ TextSelectionStartEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ onTextSelectionStart(args: TextSelectionStartEventArgs): void {
+ // custom logic
+ console.log(args);
+ }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Arguments include:**
+
+- pageNumber - The page where the selection started (1‑based indexing).
+- name - The event name identifier.
+
+### textSelectionEnd
+
+Triggered when the selection operation completes.
+
+{% tabs %}
+{% highlight ts tabtitle="Standalone" %}
+import { Component, ViewChild } from '@angular/core';
+import {
+ PdfViewerComponent,
+ PdfViewerModule,
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ TextSelectionEndEventArgs,
+} from '@syncfusion/ej2-angular-pdfviewer';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [PdfViewerModule],
+ providers: [
+ ToolbarService,
+ NavigationService,
+ TextSearchService,
+ TextSelectionService,
+ PrintService,
+ MagnificationService,
+ AnnotationService,
+ FormDesignerService,
+ FormFieldsService,
+ PageOrganizerService,
+ ],
+ template: `
+
+
+ `,
+})
+export class AppComponent {
+ @ViewChild('pdfviewer')
+ public pdfviewerObj!: PdfViewerComponent;
+
+ public document: string =
+ 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
+
+ public resource: string =
+ 'https://cdn.syncfusion.com/ej2/32.2.3/dist/ej2-pdfviewer-lib';
+
+ onTextSelectionEnd(args: TextSelectionEndEventArgs): void {
+ // custom logic
+ console.log(args);
+ }
+}
+{% endhighlight %}
+{% endtabs %}
+
+**Arguments include:**
+
+- pageNumber - Page where the selection ended (1‑based indexing).
+- name - Event name identifier.
+- textContent - The full text extracted from the selection range.
+- textBounds - Array of bounding rectangles that define the geometric region of the selected text. Useful for custom UI overlays or programmatic re-selection.
+
+## See also
+
+- [Toggle text selection](./toggle-text-selection)
+- [Angular PDF Viewer events](../events)
\ No newline at end of file