From aa840e37099ada72c99ceaeb13478dd98f9d319c Mon Sep 17 00:00:00 2001
From: SF4524LogeshKumar <logeshkumar.dhamodharan@syncfusion.com>
Date: Mon, 13 Apr 2026 18:13:24 +0530
Subject: [PATCH] 1021074: Document Handling Section for Angular PDF Viewer.

---
 Document-Processing-toc.html                  |   8 +
 .../document-handling/load-large-pdf.md       | 218 ++++++++++++++
 .../document-handling/load-password-pdf.md    | 114 +++++++
 .../document-handling/preprocess-pdf.md       | 258 ++++++++++++++++
 .../document-handling/retrieve-loadedDoc.md   | 283 ++++++++++++++++++
 5 files changed, 881 insertions(+)
 create mode 100644 Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-large-pdf.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/angular/document-handling/load-password-pdf.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/angular/document-handling/preprocess-pdf.md
 create mode 100644 Document-Processing/PDF/PDF-Viewer/angular/document-handling/retrieve-loadedDoc.md

diff --git a/Document-Processing-toc.html b/Document-Processing-toc.html
index a1724c37c..3be228cea 100644
--- a/Document-Processing-toc.html
+++ b/Document-Processing-toc.html
@@ -724,6 +724,14 @@
 									<li><a href="/document-processing/pdf/pdf-viewer/angular/save-pdf-file/to-azure-active-directory">To Azure Active Directory</a></li>
 								</ul>
 							</li>
+							<li>Document Handling
+								<ul>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/document-handling/load-large-pdf">Load Large PDF Files</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/document-handling/load-password-pdf">Load Password Protected PDFs</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/document-handling/preprocess-pdf">Preprocess PDF Document Before Displaying</a></li>
+									<li><a href="/document-processing/pdf/pdf-viewer/angular/document-handling/retrieve-loadedDoc">Retrieve the Loaded Document Instance </a></li>
+								</ul>
+							</li>
 							<li><a href="/document-processing/pdf/pdf-viewer/angular/mobile-toolbar">Mobile Toolbar Interface</a></li>
 							<li><a href="/document-processing/pdf/pdf-viewer/angular/toolbar">Toolbar Customization</a>
 							    <ul>
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 000000000..15de612a6
--- /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
+<Inject services={[Toolbar, Magnification, Navigation, Print]} />
+```
+
+### 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: `
+    <div class="content-wrapper">
+      <ejs-pdfviewer 
+        #pdfViewer
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        [enableLocalStorage]="true"
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  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 000000000..6bd3273dc
--- /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
+
+![Open PDF Document](../../react/images/open-pdf.png)
+
+- A **password input popup** is automatically displayed
+
+![Password Protected Pop-up](../../react/images/password-popup.png)
+
+- 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: `
+    <div class="content-wrapper">
+      <ejs-pdfviewer 
+        #pdfViewer
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  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
+
+![Password Protected Pop-up](../../react/images/password-popup.png)
+
+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 000000000..bcaa1989d
--- /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.
+
+![Import Pages](../images/import.gif)
+
+### 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.
+
+![Extract Pages](../images/extract-page.png)
+
+### 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: `
+    <div class="control-section">
+      <div style="display: none;">
+        <ejs-uploader
+          #fileUpload
+          id="fileUpload"
+          [allowedExtensions]="'.pdf'"
+          (selected)="onSelect($event)">
+        </ejs-uploader>
+      </div>
+      <!-- Render the PDF Viewer -->
+      <ejs-pdfviewer
+        #pdfViewer
+        id="container"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        [enableAnnotation]="true"
+        [enableFormFields]="true"
+        [toolbarSettings]="toolbarSettings"
+        (toolbarClick)="toolbarClick($event)"
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  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)
+
+![Custom Stamp](../images/customStamp.png)
+
+### 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 000000000..3285f4362
--- /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: `
+    <div class="control-section">
+      <ejs-pdfviewer
+        #pdfViewer
+        id="container"
+        [resourceUrl]="resourceUrl"
+        [documentPath]="document"
+        [enableLocalStorage]="true"
+        (documentLoad)="onDocumentLoad($event)"
+        style="height: 640px; display: block;">
+      </ejs-pdfviewer>
+    </div>
+  `,
+  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: `
+    <div>
+      <div style="margin-bottom: 12px;">
+        <strong>Status:</strong> {{ ready ? 'Document loaded' : 'Loading…' }}
+        <br />
+      </div>
+
+      <div style="display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;">
+        <button (click)="zoomTo(100)" [disabled]="!ready">Zoom 100%</button>
+        <button (click)="zoomTo(150)" [disabled]="!ready">Zoom 150%</button>
+        <button (click)="goTo(1)" [disabled]="!ready">Go to Page 1</button>
+        <button (click)="goTo(5)" [disabled]="!ready">Go to Page 5</button>
+        <button (click)="printDoc()" [disabled]="!ready">Print</button>
+        <button (click)="downloadDoc()" [disabled]="!ready">Download</button>
+      </div>
+
+      <div style="height: 80vh;">
+        <ejs-pdfviewer
+          #pdfViewer
+          id="pdfViewer"
+          [resourceUrl]="resourceUrl"
+          [documentPath]="document"
+          (documentLoad)="handleDocumentLoad($event)"
+          style="height: 100%; width: 100%;">
+        </ejs-pdfviewer>
+      </div>
+    </div>
+  `,
+  providers: [
+    ToolbarService,
+    MagnificationService,
+    NavigationService,
+    PrintService,
+    TextSelectionService,
+    TextSearchService,
+  ],
+})
+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';
+
+  public ready: boolean = false;
+  public docInfo: DocumentInfo = {
+    name: '',
+    pageCount: undefined,
+    author: '',
+    title: '',
+  };
+
+  ngAfterViewInit(): void {
+    // Component initialized
+  }
+
+  handleDocumentLoad(args: any): void {
+    const viewer = this.pdfviewer;
+    if (!viewer) return;
+
+    console.log('documentLoad args:', args);
+
+    this.docInfo = {
+      name: args?.documentName || '',
+      pageCount: (viewer?.pageCount) || (args?.pageCount),
+      author: args?.documentInformation?.author || '',
+      title: args?.documentInformation?.title || '',
+    };
+
+    // Defer just a tick to ensure layout/modules ready before calling APIs
+    requestAnimationFrame(() => {
+      try {
+        if (viewer?.magnification?.zoomTo) {
+          viewer.magnification.zoomTo(150); // default zoom after load
+        }
+        if (viewer?.navigation?.goToPage) {
+          const targetPage = 1; // keep within bounds if you want to guard
+          if (!this.docInfo.pageCount || targetPage <= this.docInfo.pageCount) {
+            viewer.navigation.goToPage(targetPage);
+          }
+        }
+      } catch (e) {
+        console.warn('Post-load actions failed:', e);
+      } finally {
+        this.ready = true;
+      }
+    });
+  }
+
+  // ---- UI action handlers (module APIs) ----
+  zoomTo(percent: number): void {
+    const viewer = this.pdfviewer;
+    try {
+      viewer?.magnification?.zoomTo?.(percent);
+    } catch (e) {
+      console.warn('zoomTo failed:', e);
+    }
+  }
+
+  goTo(page: number): void {
+    const viewer = this.pdfviewer;
+    try {
+      viewer?.navigation?.goToPage?.(page);
+    } catch (e) {
+      console.warn('goToPage failed:', e);
+    }
+  }
+
+  printDoc(): void {
+    const viewer = this.pdfviewer;
+    try {
+      viewer?.print?.print?.();
+    } catch (e) {
+      console.warn('print failed:', e);
+    }
+  }
+
+  downloadDoc(): void {
+    const viewer = this.pdfviewer;
+    try {
+      viewer?.download?.();
+    } catch (e) {
+      console.warn('download failed:', e);
+    }
+  }
+}
+{% endhighlight %}
+{% endtabs %}
+
+## See also
+- Angular PDF Viewer – [API Reference](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default) ([methods](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#methods), [events](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#events), [properties](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#properties))
+- Events: [`documentLoad`](https://ej2.syncfusion.com/angular/documentation/api/pdfviewer/index-default#documentload) and related argument shape (check your package version)
+- [Modules and Services](https://help.syncfusion.com/document-processing/pdf/pdf-viewer/angular/feature-module) (e.g., Magnification, Navigation, Print) — ensure the features you call are injected