Syncfusion Angular Pdf Viewer

Syncfusion Angular PDF Viewer UI Sample Generator

Target package: @syncfusion/ej2-angular-pdfviewer

Mandatory 3-Step workflow (Strict Enforcement)

EVERY query MUST follow these steps sequentially:

STEP 1: Workspace Detection ? STEP 2: Read Reference File ? STEP 3: Generate Code

Blocking Rules

1. NO code generation until Steps 1 & 2 are complete 2. NO assumptions - Always verify workspace AND read reference files first 3. NO undocumented APIs - Use ONLY APIs from reference files

Violation = STOP and restart with proper protocol

---

Mandatory Workflow

STEP 1: Workspace Detection (REQUIRED - DO THIS FIRST)

Execute these tools:

1. file_search: **/{package.json,angular.json,tsconfig.json}
2. list_dir: src/app/
3. read_file: package.json (if exists)

Report to user:

?? STEP 1 COMPLETE:
- Workspace: [Empty / Angular X.X project detected]
- Files found: [list]
- Decision: [Create new / Use existing]

STEP 2: Read Reference File (REQUIRED - DO THIS SECOND)

Execute these steps:

1. Match user query to Reference File Routing Guide below
2. Use read_file on: references\[filename].md
3. Extract ALL steps/APIs from reference file

Report to user:

?? STEP 2 COMPLETE:
- Reference file: [filename.md]
- Steps found: [list sequential steps]
- APIs validated: [list properties/methods used]

STEP 3: Generate Code (EXECUTE ONLY AFTER STEPS 1 & 2)

Validation checklist:

• [ ] Every API cross-referenced against reference file
• [ ] No invented/assumed properties used
• [ ] Angular patterns followed (component bindings, lifecycle hooks)
• [ ] If API not in reference file ? DELETE it

If feature not in reference file:

? FEATURE NOT SUPPORTED
The requested [feature/API] is not documented.
Available alternatives: [list from reference files]

---

Reference File Routing Guide

Core Setup

Navigation

Viewing & Interaction

Toolbar & Context Menu

Annotations

Forms

Document Actions

Advanced

---

Toolbar Item Name Validation (CRITICAL)

When generating toolbar configurations: 1. ALWAYS read `toolbar-settings.md` first 2. Use ONLY names from these sections:

• "Available Primary Toolbar Items"
• "Available Annotation Toolbar Items"
• "Available Form Designer Items"

3. Character-by-character validation required - No typos allowed

Common mistakes to prevent:

• ? AnotatetionEditTool ? ? AnnotationEditTool
• ? CalibrationOption ? ? CalibrateTool
• ? ShapeAnnotationOption ? ? ShapeTool

---

Quick Start Example

Add the Angular PDF Viewer by using <ejs-pdfviewer> selector in the template section of the src/app/app.ts file to render the PDF Viewer component.

import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService,
         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  imports: [ PdfViewerModule ],
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = window.location.origin + "/assets/ej2-pdfviewer-lib";
  
  ngOnInit(): void {
  }
}

Settings Configurations

Rule 1: Simple Settings (1-3 properties) ? Inline

public annotationSelection = {
  selectionBorderColor: 'blue',
  resizerSize: 8
};

Rule 2: Complex Settings (4+ properties or enums) ? Import enums

import { AnnotationResizerLocation, CursorType } from '@syncfusion/ej2-angular-pdfviewer';

public annotationSelection = {
  selectionBorderColor: '#0000ff',
  resizerSize: 8,
  resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
  resizerCursorType: CursorType.grab
};

---

Protocol Violation Handling

If user calls out violation: IMMEDIATELY acknowledge, apologize, and restart with proper protocol.

---

Enforcement Checklist

Before generating code, verify:

• [ ] Step 1 executed (workspace detection) and reported
• [ ] Step 2 executed (reference file read) and reported
• [ ] Every API validated against reference file
• [ ] No undocumented APIs used
• [ ] Angular patterns followed

Reference files are SOURCE OF TRUTH - everything must trace back to them.

Syncfusion Angular PDF Viewer — Skill

Overview

The syncfusion-angular-pdf-viewer skill enables AI-assisted code generation for the Syncfusion Angular PDF Viewer (`PdfViewerComponent`). It produces minimal, copy-pasteable TS/JS code to embed, configure, and interact with PDF documents inside Angular applications.

---

Compatibility

Starting from Angular 19, standalone components are the default. Moreover in Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

---

Skill Structure

syncfusion-angular-pdfviewer/
├── SKILL.md                      # Skill rules, routing, and code generation guidelines
├── README.md                     # This file
└── references/
    ├── getting-started.md        # Minimal setup & initialization template
    ├── general-properties.md     # Core viewer properties (documentPath, height, locale, etc.)
    ├── enable-properties.md      # Feature toggle properties (enableToolbar, enableAnnotation, etc.)
    ├── toolbar-settings.md       # Toolbar visibility and item customization
    ├── toolbar-methods.md        # Programmatic toolbar show/hide at runtime
    ├── contextmenu.md            # Right-click context menu customization
    ├── page-navigation.md        # Navigate between pages programmatically
    ├── bookmark-navigation.md    # Bookmark panel and navigation
    ├── thumbnail-navigation.md   # Thumbnail panel and page previews
    ├── hyperlink-navigation.md   # Hyperlink and external link behavior
    ├── magnification.md          # Zoom levels, zoom modes, fit-to-page/width
    ├── interaction-mode.md       # Selection mode vs. panning mode
    ├── text-selection.md         # Enable text select, copy, and selection events
    ├── text-search.md            # Find text in PDF with search options
    ├── annotation-settings.md    # Annotation appearance (colors, opacity, styles)
    ├── annotation-events.md      # Annotation lifecycle events (add, delete, resize, etc.)
    ├── shape-label-settings.md   # Shape/measure annotation label customization
    ├── redaction-annotation.md   # Redaction: create, configure, and apply
    ├── form-field-settings.md    # Form field default properties
    ├── form-field-events.md      # Form field interaction events (focus, blur, change)
    ├── download.md               # PDF download configuration
    ├── print.md                  # PDF print configuration
    ├── organize-pages.md         # Reorder, rotate, insert, remove, merge pages
    ├── api-methods.md            # Programmatic API (load, export, undo/redo, extract text)
    └── events.md                 # Complete PDF Viewer event reference

---

Quick Start

1. Install the latest Angular CLI

npm install -g @angular/cli

2. Create a Angular Project

ng new my-app
cd my-app

3. Install the Package

npm install @syncfusion/ej2-angular-pdfviewer --save

4. Copy WebAssembly Resources

cp -R ./node_modules/@syncfusion/ej2-pdfviewer/dist/ej2-pdfviewer-lib  src/assets/ej2-pdfviewer-lib

5. Add CSS Imports (src/index.css)

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';

6. Basic Component (src/app/app.ts)

import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService,
         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                    [documentPath]='document'
                    [resourceUrl]='resource'
                    style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  imports: [ PdfViewerModule ],
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class App implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource: string = "https://cdn.syncfusion.com/ej2/26.2.11/dist/ej2-pdfviewer-lib";
  ngOnInit(): void {
  }
}

7. Run the App

ng serve --open

---

Available Services

Inject only the services your use-case requires to keep the bundle lean.

---

Reference File Routing

Use the table below to find the correct reference file for any feature request.

Core Setup

Navigation

Viewing & Interaction

Toolbar & Context Menu

Annotations

Forms

Document Actions

Advanced / API

---

Annotation Events

Description: Annotation events in Angular PDF Viewer are triggered when annotations are added, removed, moved, resized, selected, or modified on PDF document pages. These events enable custom workflows and UI updates based on annotation interactions.

Table of Contents

• When to Use Annotation Events
• Choosing the Right Event
• How to Use Annotation Events
• Annotation Events Reference
• Annotation Object Reference
• Common Use Cases

---

When to Use Annotation Events

Guide users to implement annotation events when they need to:

• Track user interactions - Log annotation changes for audit trails, analytics, or compliance
• Implement custom workflows - Trigger actions when annotations are added, modified, or removed
• Build custom UI - Update properties panels, toolbars, or status displays based on annotation state
• Enforce business rules - Validate or restrict annotation placement, modifications, or deletions
• Synchronize data - Save annotation changes to a backend, sync across users, or update related data
• Enhance UX - Provide real-time feedback, tooltips, or guided workflows during annotation

Why events matter: The PDF Viewer fires events at key moments in the annotation lifecycle. By handling these events, users can extend the viewer's behavior without modifying its internals.

---

Choosing the Right Event

Help users select the appropriate event based on their goal:

Decision Pattern: If user needs to prevent an action → use beforeAdd* events with args.cancel. If user needs to react after an action → use lifecycle events like annotationAdd, annotationMove, annotationRemove.

---

How to Use Annotation Events

Annotation events allow you to respond to user interactions with annotations in the PDF Viewer. Each event provides detailed information about the annotation and the action performed.

Basic Event Handler Pattern

export class AppComponent {
  @ViewChild('pdfviewer')
  public pdfviewerControl: PdfViewerComponent;

  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  eventHandler(args: any): void {
    console.log('Event triggered:', args);
  }
}

<ejs-pdfviewer
  #pdfviewer
  [documentPath]="document"
  (annotationAdd)="eventHandler($event)"
  style="height:640px;display:block">
</ejs-pdfviewer>

---

Annotation Events Reference

The following table lists all available annotation events. Use this reference to identify event names, understand what triggers them, and access the data they provide.

How to read this table:

• Event Name: The event binding name to use on <ejs-pdfviewer>
• Description: When the event fires during the annotation lifecycle
• Args: The TypeScript type of the event arguments object
• Args Properties: Key properties available in the event handler, including data types

Usage tip: Most events provide annotationId, pageIndex, and the complete annotation object. Use the annotation object to access all properties listed in the Annotation Object Reference section below.

---

Annotation Object Reference

Purpose: When event handlers receive an annotation object in their arguments, use this reference to understand which properties are available and how to access them.

When to consult this reference:

• User needs to read annotation properties (color, opacity, position, type)
• User wants to display annotation details in a custom UI
• User needs to filter or validate annotations based on specific properties
• User is building custom logic based on annotation state

Usage pattern: Access properties directly from the args.annotation object:

onAnnotationSelect(args: any): void {
  const annotation = args.annotation;
  
  console.log('Type:', annotation.type);
  
  if (annotation.type === 'FreeText') {
    console.log('Content:', annotation.content);
  }
}

Property availability: Not all properties are present on all annotation types. Check type or subType to determine which type-specific properties are available.

Core Properties (Available on All Annotation Types)

Type-Specific Properties

Different annotation types expose additional properties. Check the type property to determine which properties are available.

Nested Object Structures

Many annotation properties are complex objects. Use these references to understand their structure and access nested properties.

Rect Object

Purpose: Represents the rectangular boundary of an annotation. Available via args.annotation.rect.

Usage example:

const rect = args.annotation.rect;
console.log(`Position: (${rect.left}, ${rect.top})`);
console.log(`Size: ${rect.width} x ${rect.height}`);

Review Object

Purpose: Contains review/approval status for annotations. Available via args.annotation.review.

Usage example:

if (args.annotation.review) {
  console.log('Review state:', args.annotation.review.state);
  console.log('Reviewed by:', args.annotation.review.author);
}

AnnotationSettings Object

Purpose: Configuration settings for the annotation. Available via args.annotation.annotationSettings.

Usage example:

if (args.annotation.annotationSettings?.isLock) {
  console.log('This annotation is locked');
}

AnnotationSelectorSettings Object

Purpose: Visual appearance settings for annotation selection handles and borders. Available via args.annotation.annotationSelectorSettings.

LabelSettings Object

Purpose: Styling configuration for annotation labels (used in shape and measurement annotations). Available via args.annotation.labelSettings.

Font Object

Purpose: Text formatting properties for free text annotations. Available via args.annotation.font.

Usage example:

if (args.annotation.type === 'FreeText') {
  const font = args.annotation.font;
  if (font.isBold) console.log('Text is bold');
  if (font.isItalic) console.log('Text is italic');
}

Calibrate Object

Purpose: Measurement calibration data for distance/area annotations. Available via args.annotation.calibrate.

Bounds Object

Purpose: Position and dimensions of an annotation. Available via args.annotation.bounds.

Usage example:

const bounds = args.annotation.bounds;
console.log(`Annotation at (${bounds.x}, ${bounds.y})`);
console.log(`Size: ${bounds.width} x ${bounds.height}`);

console.log(`Alternative: left=${bounds.left}, top=${bounds.top}, right=${bounds.right}`);

VertexPoint Object

Purpose: Represents individual points in polygon-based annotations. Available via args.annotation.vertexPoints (array).

Usage example:

if (args.annotation.vertexPoints) {
  args.annotation.vertexPoints.forEach((point, index) => {
    console.log(`Point ${index}: (${point.x}, ${point.y})`);
  });
}

---

Common Use Cases

Purpose: Guide users through practical implementations that solve real-world requirements. Each example demonstrates a specific pattern and explains when to apply it.

How to use these examples: 1. Identify the user's requirement (audit logging, access control, custom UI, etc.) 2. Point them to the matching use case 3. Explain how to adapt the pattern to their specific needs 4. Highlight which event properties are essential for their scenario

---

1. Tracking Annotation Changes

User Need: Log user interactions, implement audit trails, or send analytics data.

When to recommend: User mentions "tracking", "logging", "audit", "analytics", "telemetry", or "history".

Pattern: Attach handlers to lifecycle events (annotationAdd, annotationMove, annotationRemove) and log relevant data.

onAnnotationMove(args: any): void {
  this.logEvent('annotation_moved', {
    annotationId: args.annotationId,
    page: args.pageIndex,
    timestamp: new Date().toISOString()
  });
}

<ejs-pdfviewer (annotationMove)="onAnnotationMove($event)"></ejs-pdfviewer>

Why this works: annotationMove fires after the move completes, providing the final position. For real-time tracking during drag, use annotationMoving instead.

Key properties: annotationId (identifier), pageIndex (location), timestamp (when).

---

2. Preventing Certain Actions

User Need: Restrict annotation placement on specific pages (e.g., cover pages, signature pages) or enforce business rules.

When to recommend: User mentions "prevent", "restrict", "block", "validation", "business rules", or "access control".

Pattern: Use beforeAddFreeText event and set args.cancel = true to prevent the action.

Important: This is the only event that supports cancellation. Use it for validation before annotations are created.

onBeforeAddFreeText(args: any): void {
  if (args.pageIndex === 0) {
    args.cancel = true;
    alert('Annotations are not allowed on the cover page.');
  }
}

<ejs-pdfviewer (beforeAddFreeText)="onBeforeAddFreeText($event)"></ejs-pdfviewer>

Why this works: Setting args.cancel = true stops the annotation from being added. The event fires before the action completes, allowing intervention.

Limitation: Currently only available for beforeAddFreeText. For other annotation types, handle in annotationAdd and remove if invalid using deleteAnnotationById().

---

3. Accessing Annotation Properties

User Need: Display annotation details in a properties panel, inspector, or custom UI.

When to recommend: User mentions "properties panel", "inspector", "details view", "custom UI", or "show annotation info".

Pattern: Use annotationSelect to get the full annotation object when user selects an annotation, then display its properties.

onAnnotationSelect(args: any): void {
  const annotation = args.annotation;
  console.log('Color:', annotation.color);
  this.updatePropertiesPanel(args.annotationId, annotation);
}

<ejs-pdfviewer (annotationSelect)="onAnnotationSelect($event)"></ejs-pdfviewer>

Why this works: annotationSelect provides the complete annotation object with all properties. Reference the Annotation Object Reference above to see all available properties.

Key insight: Use args.isMultiSelect to detect if multiple annotations are selected, and args.annotationCollection to process them.

---

4. Validating Property Changes

User Need: Track specific property modifications for compliance, review workflows, or change detection.

When to recommend: User mentions "property changes", "detect modifications", "compliance", "track edits", or "change history".

Pattern: Use annotationPropertiesChange event with boolean flags to identify which properties changed.

onAnnotationPropertiesChange(args: any): void {
  if (args.isColorChanged) {
    console.log('Annotation color changed to:', args.annotation.color);
  }
}

<ejs-pdfviewer (annotationPropertiesChange)="onAnnotationPropertiesChange($event)"></ejs-pdfviewer>

Why this works: The event provides boolean flags (isColorChanged, isThicknessChanged, isOpacityChanged) so you can detect exactly what changed without comparing old/new values.

Key properties: Use args.annotation to access the updated property values.

Advanced: Combine with annotationSelect to show real-time property updates in a UI panel.

---

5. Handling Multiple Selections

User Need: Perform bulk operations on multiple annotations (delete all, change color, export selected).

When to recommend: User mentions "bulk operations", "multiple annotations", "select all", "batch processing", or "group actions".

Pattern: Check args.isMultiSelect in annotationSelect event and use args.annotationCollection to process each annotation.

onAnnotationSelect(args: any): void {
  if (args.isMultiSelect) {
    console.log('Multiple annotations selected');
    console.log('Selected annotations count:', args.annotationCollection.length);
    
    args.annotationCollection.forEach((annotation: any) => {
      console.log('Annotation ID:', annotation.annotationId);
    });
  } else {
    console.log('Single annotation selected:', args.annotationId);
  }
}

<ejs-pdfviewer (annotationSelect)="onAnnotationSelect($event)"></ejs-pdfviewer>

Why this works: annotationCollection contains all selected annotations when isMultiSelect === true. Loop through this array to apply operations to each annotation.

Implementation tip: After bulk operations, use the viewer's API methods (e.g., deleteAnnotationById(), updateAnnotationProperties()) on each annotation ID from the collection.

UI consideration: Provide clear feedback showing how many annotations are selected and which operation will be applied.

Annotation Settings in Angular PdfViewer Component

Description: Configure PDF annotation settings to control appearance, behavior, and interaction of text markup, shape, stamp, sticky notes, measurement, free text, ink, and signature annotations in the Angular PdfViewer component. Customize colors, styles, author details, access restrictions, and default properties to meet specific annotation requirements for document review and collaboration workflows.

Table of Contents

• Overview
• Quick Start
• Global vs Type-Specific Settings
• Annotation Types Available
• Settings Properties Reference
• Annotation-Related Component Properties
• Core Annotation Settings
• Common Use Cases
• Type Definitions

---

Overview

The Angular PdfViewer provides comprehensive annotation configuration through property binding. Settings can be applied globally to all annotations or customized per annotation type through dedicated settings properties like highlightSettings, stampSettings, freeTextSettings, etc.

When to use: Configure annotation properties during component initialization to establish default behaviors, appearance standards, and interaction rules for PDF document markup workflows.

How Annotation Settings Work

Settings are bound to the <ejs-pdfviewer> component and applied when annotations are created. Global settings provide baseline defaults while type-specific settings override globals for individual annotation types.

---

Quick Start

Apply Settings to Specific Annotation Type

Configure individual annotation type appearance and behavior using type-specific property bindings:

import { Component, OnInit } from '@angular/core';
import { AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <ejs-pdfviewer 
      id="pdfViewer"
      [documentPath]="document"
      [highlightSettings]="highlightSettings"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [AnnotationService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  
  public highlightSettings = {
    color: 'green',
    opacity: 0.6,
    author: 'John Doe',
    isLock: false
  };

  ngOnInit(): void {}
}

Use this when: You need to control how a specific annotation type (highlight, rectangle, stamp, etc.) appears across your PDF document.

Apply Global Settings to All Annotations

Use annotationSettings to apply common configuration across all annotation types:

import { Component, OnInit } from '@angular/core';
import { AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <ejs-pdfviewer 
      id="pdfViewer"
      [documentPath]="document"
      [annotationSettings]="annotationSettings"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [AnnotationService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  
  public annotationSettings = {
    author: 'PDF Reviewer',
    opacity: 0.7,
    isLock: false
  };

  ngOnInit(): void {}
}

Use this when: You want consistent author names, security policies, or opacity values applied to all annotation types in the document.

---

Global vs Type-Specific Settings

Global Settings (annotationSettings):

• Applied to all annotation types unless overridden
• Ideal for organization-wide policies (author name, lock state, download restrictions)
• Available properties: author, subject, customData, isLock, isPrint, skipDownload, skipPrint, minWidth, minHeight, maxWidth, maxHeight, opacity, allowedInteractions

Type-Specific Settings:

• Override global settings for individual annotation types
• Control unique properties per annotation category
• Examples: highlightSettings (text markup color), freeTextSettings (font properties), stampSettings (stamp items), measurementSettings (calibration units)

Decision Guide:

• Setting author name for all annotations? → Use annotationSettings (global)
• Customizing highlight color only? → Use highlightSettings (type-specific)
• Locking all annotations? → Use annotationSettings (global)
• Different colors for shapes vs text markup? → Use rectangleSettings and highlightSettings separately

---

Annotation Types Available

The Angular PdfViewer supports the following annotation types with corresponding settings properties:

---

Settings Properties Reference

Annotation-Related Component Properties

Properties available directly on the <ejs-pdfviewer> component:

Core Annotation Settings

Settings properties available for annotation configuration:

---

Common Use Cases

Use Case 1: Apply Company Branding to All Annotations

Set organization-wide author and metadata for all annotations:

import { Component, OnInit } from '@angular/core';
import { AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: `
    <ejs-pdfviewer 
      id="pdfViewer"
      [documentPath]="document"
      [annotationSettings]="annotationSettings"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [AnnotationService]
})
export class AppComponent implements OnInit {
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  
  public annotationSettings = {
    author: 'Acme Corporation',
    subject: 'Document Review',
    customData: { department: 'Legal', version: '1.0' }
  };

  ngOnInit(): void {}
}

Use Case 2: Lock Annotations After Creation

Prevent users from editing annotations once created:

public annotationSettings = {
  isLock: true,
  allowedInteractions: []
};

Use Case 3: Customize Multiple Annotation Type Colors

Apply distinct colors to different annotation types:

public highlightSettings = { color: '#00FF00', opacity: 0.5 };
public underlineSettings = { color: '#0000FF', opacity: 0.4 };
public rectangleSettings = { fillColor: '#FFFF00', strokeColor: '#FF0000' };

Use Case 4: Restrict Annotation Download and Print

Hide annotations from exported and printed documents:

public annotationSettings = {
  skipDownload: true,
  skipPrint: true
};

Use Case 5: Configure Free Text Annotation Defaults

Set default font properties for text box annotations:

public freeTextSettings = {
  fontFamily: 'Helvetica',
  fontSize: 16,
  fontColor: '#000000',
  fillColor: '#FFFF99',
  borderColor: '#FF0000',
  borderWidth: 2,
  textAlignment: 'Left',
  enableAutoFit: true
};

Use Case 6: Set Measurement Calibration

Configure measurement units and scale ratio for measurement annotations:

public measurementSettings = {
  conversionUnit: 'cm',
  displayUnit: 'cm',
  scaleRatio: 2,
  depth: 96
};

Use Case 7: Configure Stamp Annotation Items

Define available stamp items for users:

public stampSettings = {
  dynamicStamps: ['Approved', 'Reviewed', 'Confidential'],
  signStamps: ['Accepted', 'Rejected', 'SignHere'],
  standardBusinessStamps: ['Draft', 'Final', 'ForPublicRelease'],
  opacity: 0.8,
  author: 'Stamp Authority'
};

---

Type Definitions

Common Annotation Properties

Available across most annotation settings types (properties marked with asterisk have limited availability):

Important: Properties like isLock, isPrint, skipDownload, skipPrint are NOT directly configurable in settings objects. These are set on annotation instances after creation or through programmatic editing.

Text Markup Annotation Properties

Specific to highlightSettings, underlineSettings, strikethroughSettings, and squigglySettings:

Shape Annotation Properties

Applicable to lineSettings, arrowSettings, rectangleSettings, circleSettings, and polygonSettings:

Free Text Annotation Properties

Specific to freeTextSettings:

Measurement Annotation Properties

Applicable to distanceSettings, perimeterSettings, areaSettings, radiusSettings, volumeSettings, and measurementSettings:

Stamp Annotation Properties

Specific to stampSettings:

Sticky Notes Properties

Specific to stickyNotesSettings:

Ink Annotation Properties

Specific to inkAnnotationSettings:

Handwritten Signature Properties

Specific to handWrittenSignatureSettings (limited documentation):

CustomStampSettings Properties

AnnotationDrawingOptions Properties

SignatureDialogSettings Properties

Enumeration Types

CalibrationUnit:

• in - Inches
• cm - Centimeters
• mm - Millimeters
• ft - Feet
• pt - Points
• p - Picas

FontStyle:

• None - Normal text
• Bold - Bold text
• Italic - Italic text
• Underline - Underlined text
• Strikethrough - Strikethrough text

TextAlignment:

• Left - Align text left
• Center - Center text
• Right - Align text right
• Justify - Justify text

LineHeadStyle:

• None - No line cap
• Arrow - Arrow head
• Open - Open arrow
• Closed - Closed arrow
• OpenArrow - Open arrow variation
• ClosedArrow - Closed arrow variation
• Square - Square cap
• Round - Round cap
• Diamond - Diamond cap

DynamicStampItem:

• Approved
• Confidential
• NotApproved
• Received
• Reviewed
• Revised

SignStampItem:

• Accepted
• InitialHere
• Rejected
• SignHere
• Witness

StandardBusinessStampItem:

• Approved
• Completed
• Confidential
• Draft
• Final
• ForComment
• ForPublicRelease
• InformationOnly
• NotApproved
• NotForPublicRelease
• PreliminaryResults
• Void

SignatureFitMode:

• Default
• Stretch

DisplayMode:

Draw - Display only the draw option in the signature dialog. Text - Display only the text option in the signature dialog. Upload - Display only the upload option in the signature dialog.

API Methods in Angular PdfViewer Component

Brief: Comprehensive reference for programmatic control of the Angular PdfViewer component including methods for document loading, annotation management, form field operations, text extraction, navigation, and state management. Use these APIs when the user requires programmatic control beyond standard UI interactions.

Table of Contents

• When to Use These APIs
• API Categories
• Complete API Reference
• Common Parameter Types
• Usage Examples by Scenario

When to Use These APIs

Guide users to these methods when they express these needs:

• "Load a PDF programmatically" → Use load() method
• "Process form data from PDF" → Use exportFormFieldsAsObject() or importFormFields()
• "Add/edit PDF annotations dynamically" → Use annotation.addAnnotation(), annotation.editAnnotation()
• "Extract text from PDF" → Use extractText() with bounds parameter
• "Implement undo/redo for PDF edits" → Use undo() and redo() methods
• "Respond to layout changes" → Use updateViewerContainer() after resize
• "Navigate to specific coordinates" → Use coordinate conversion methods

Alternative approaches: If users need simple page navigation or UI interactions, refer to navigation.md or events.md instead of programmatic APIs.

API Categories

When users describe their goal, identify which category fits best, then recommend specific methods:

Complete API Reference

Annotation Module Methods

Form Designer Module Methods

Core Methods

Common Parameter Types

CRITICAL: Bounds Format Differs Between Annotations and Form Fields

Annotations – bounds (lowercase):

viewer.annotation.addAnnotation('Rectangle', {
  offset: { x: 100, y: 100 },
  width: 200,
  height: 50,
  pageNumber: 1
});

Form Fields – bounds (capitalized X, Y, Width, Height):

viewer.formDesigner.addFormField('Textbox', {
  bounds: { X: 100, Y: 100, Width: 200, Height: 30 }
});

Do NOT mix or interchange these formats - each API expects its specific casing.

AnnotationSettings

Used with annotation.addAnnotation() to customize annotation properties.

FormFieldSettings

Used with formDesigner.addFormField() and formDesigner.updateFormField().

FormField

Represents a form field in the PDF document.

PageInfo

Contains information about a specific page.

Usage Examples by Scenario

Scenario 1: Add Text Markup Annotations Programmatically

When: User wants to highlight, underline, or strikethrough text programmatically.

Why: Use annotation.addAnnotation() with specific bounds to add text markup without user interaction - ideal for highlighting search results or marking important sections.

// Add highlight annotation
viewer.annotation.addAnnotation("Highlight", {
  bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
  pageNumber: 1,
  color: '#FFFF00',
  opacity: 0.5
} as any);

// Add underline annotation
viewer.annotation.addAnnotation("Underline", {
  bounds: [{ x: 250, y: 148, width: 345, height: 14 }],
  pageNumber: 2,
  color: '#FF0000'
} as any);

// Add strikethrough annotation
viewer.annotation.addAnnotation("Strikethrough", {
  bounds: [{ x: 250, y: 144, width: 345, height: 14 }],
  pageNumber: 2,
  color: '#0000FF'
} as any);

Scenario 2: Add Shape Annotations Programmatically

When: Creating diagrams, marking regions, or adding visual elements to PDFs.

Why: Use annotation.addAnnotation() with shape types to add lines, rectangles, circles, and polygons dynamically - useful for marking areas or creating diagrams.

// Add line annotation
viewer.annotation.addAnnotation("Line", {
  offset: { x: 200, y: 230 },
  pageNumber: 1,
  vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }],
  strokeColor: '#0000FF',
  thickness: 2
} as any);

// Add rectangle annotation
viewer.annotation.addAnnotation("Rectangle", {
  offset: { x: 200, y: 480 },
  pageNumber: 1,
  width: 150,
  height: 75,
  fillColor: '#FFFF00',
  strokeColor: '#FF0000'
} as any);

// Add circle annotation
viewer.annotation.addAnnotation("Circle", {
  offset: { x: 200, y: 620 },
  pageNumber: 1,
  width: 90,
  height: 90,
  fillColor: '#00FF00'
} as any);

Scenario 3: Add Stamp Annotations Programmatically

When: Adding approval stamps, signatures, or custom images to PDFs.

Why: Use annotation.addAnnotation() with stamp types to add dynamic, approved, or custom stamp images - ideal for approval workflows.

// Add dynamic stamp
viewer.annotation.addAnnotation("Stamp", {
  offset: { x: 200, y: 140 },
  pageNumber: 1
} as any, DynamicStampItem.Approved);

// Add custom stamp
viewer.annotation.addAnnotation('Stamp', {
  offset: { x: 100, y: 440 },
  width: 46,
  height: 100,
  pageNumber: 1,
  customStamps: [{
    customStampName: "Image",
    customStampImageSource: "data:image/jpeg;base64,/9j4AAQSkZJRg..."
  }]
} as any);

Scenario 4: Edit Existing Annotations

When: Modifying annotation properties like color, position, or lock state.

Why: Use annotation.editAnnotation() to update existing annotations programmatically - essential for batch updates or conditional styling.

// Edit annotation properties
for (let i = 0; i < viewer.annotationCollection.length; i++) {
  if (viewer.annotationCollection[i].subject === "Rectangle") {
    viewer.annotationCollection[i].strokeColor = "#0000FF";
    viewer.annotationCollection[i].thickness = 2;
    viewer.annotationCollection[i].fillColor = "#FFFF00";
    viewer.annotation.editAnnotation(viewer.annotationCollection[i]);
  }
}

Scenario 5: Add Sticky Notes and Free Text

When: Adding comments or text annotations to PDFs.

Why: Use annotation.addAnnotation() for notes and editable text boxes - perfect for commenting or adding instructions.

// Add sticky note
viewer.annotation.addAnnotation("StickyNotes", {
  offset: { x: 100, y: 200 },
  pageNumber: 1
} as any);

// Add free text annotation
viewer.annotation.addAnnotation("FreeText", {
  offset: { x: 100, y: 150 },
  fontSize: 16,
  fontFamily: "Helvetica",
  pageNumber: 1,
  width: 200,
  height: 40,
  textAlignment: 'Center',
  borderStyle: 'solid',
  borderWidth: 2,
  borderColor: 'red',
  fillColor: 'blue',
  fontColor: 'white',
  defaultText: "Syncfusion"
} as any);

Scenario 6: Manage Form Fields

When: Working with fillable PDFs that have form fields.

Why: Use form field methods to read current state, pre-fill from database, and export for submission.

// Retrieve all form fields
const formFields = viewer.retrieveFormFields();
console.log(formFields);

// Update specific field value
const field = formFields.find(f => f.name === 'First Name');
if (field) {
  field.value = 'John';
  field.tooltip = 'First Name';
  viewer.updateFormFieldsValue(field);
}

// Export filled form data
viewer.exportFormFieldsAsObject('Fdf').then((data: any) => {
  console.log('Exported data:', data);
});

// Reset all fields
viewer.resetFormFields();

// Clear all fields
viewer.clearFormFields();

Scenario 7: Dynamic Form Field Creation

When: Creating fillable PDF forms programmatically.

Why: Use formDesigner.addFormField() to dynamically add textboxes, checkboxes, dropdowns - ideal for building forms on the fly.

// Add textbox form field
viewer.formDesigner.addFormField('Textbox', {
  name: 'firstName',
  bounds: { X: 100, Y: 100, Width: 200, Height: 30 },
  value: '',
  fontSize: 12,
  fontFamily: 'Helvetica',
  isRequired: true,
  tooltip: 'Enter your first name'
} as any);

// Add checkbox
viewer.formDesigner.addFormField('Checkbox', {
  name: 'agreeTerms',
  bounds: { X: 100, Y: 150, Width: 20, Height: 20 },
  isChecked: false
} as any);

// Add dropdown
viewer.formDesigner.addFormField('DropDown', {
  name: 'country',
  bounds: { X: 100, Y: 200, Width: 200, Height: 30 },
  options: [
    { itemName: 'USA', itemValue: 'us' },
    { itemName: 'Canada', itemValue: 'ca' }
  ]
} as any);

Scenario 8: Extract Text from PDF

When: Getting text content from a specific region.

Why: Use extractText() with bounds for targeted extraction - ideal for processing specific fields or copying text from coordinates.

// Extract text from rectangular region
const bounds = { x: 100, y: 150, width: 200, height: 100 };
const extractedText = viewer.extractText(bounds);
console.log('Extracted:', extractedText);

Scenario 9: Navigate and Get Page Information

When: Programmatically moving to specific pages or getting page details.

Why: Use getPageInfo() for layout calculations and coordinate conversion for precise positioning.

// Get page information
const pageInfo = viewer.getPageInfo(0);
console.log('Page dimensions:', pageInfo?.width, pageInfo?.height);

// Get page number from click coordinates
const pageNum = viewer.getPageNumberFromClientPoint({x: 100, y: 200});
console.log('Page number:', pageNum);

// Convert coordinates
const pagePoint = viewer.convertClientPointToPagePoint({x: 100, y: 200});
const clientPoint = viewer.convertPagePointToClientPoint({x: 50, y: 75});

Scenario 10: Implement Undo/Redo

When: Allowing users to undo/redo annotations or form changes.

Why: Use undo() and redo() to provide familiar editing experience - essential for annotation workflows.

// User clicks undo button
viewer.undo();

// User clicks redo button
viewer.redo();

Scenario 11: Add Measurement Annotations

When: Adding distance, perimeter, area, radius, or volume measurements.

Why: Use measurement annotation types for technical drawings or architectural plans.

// Add distance annotation
viewer.annotation.addAnnotation("Distance", {
  offset: { x: 200, y: 230 },
  pageNumber: 1,
  vertexPoints: [{ x: 200, y: 230 }, { x: 350, y: 230 }]
} as any);

// Add area annotation
viewer.annotation.addAnnotation("Area", {
  offset: { x: 200, y: 500 },
  pageNumber: 1,
  vertexPoints: [
    { x: 200, y: 500 },
    { x: 288, y: 499 },
    { x: 289, y: 553 },
    { x: 200, y: 500 }
  ]
} as any);

Scenario 12: Add Handwritten Signature

When: Adding signature annotations to PDFs.

Why: Use signature annotation with path data for digital signing workflows.

// Add handwritten signature
viewer.annotation.addAnnotation("HandWrittenSignature", {
  offset: { x: 220, y: 180 },
  pageNumber: 1,
  width: 150,
  height: 60,
  path: '[{"command":"M","x":244.8,"y":982.0}...]' // SVG path data
} as any);

Bookmark Navigation in Angular PDF Viewer

Reference: Official Syncfusion Angular PDF Viewer documentation for bookmark navigation features

Brief: Bookmark navigation enables users to navigate through embedded PDF bookmarks. The Angular PDF Viewer automatically loads and presents bookmarks for easy document traversal through both UI panel and programmatic API methods.

⚠️ CRITICAL: Correct API Usage

ALL bookmark methods MUST be accessed via the bookmark module on the viewer component:

// ✅ CORRECT - Access via bookmark module
this.pdfViewer.bookmark.goToBookmark(pageIndex, y);
this.pdfViewer.bookmark.getBookmarks();

// ❌ WRONG - These methods DO NOT exist directly on viewer
this.pdfViewer.goToBookmark();           // ❌ NOT A VALID METHOD
this.pdfViewer.navigateToBookmark();     // ❌ NOT A VALID METHOD

Table of Contents

• When to Use
• Prerequisites
• Enabling Bookmarks
• API Methods
• Complete Examples
• Bookmark Data Structure
• Best Practices

When to Use

Use bookmarks when:

• Jump to specific sections in long PDFs (reports, manuals, specifications)
• Navigate document hierarchy without manual scrolling
• Display table of contents extracted from PDF
• Build custom navigation UIs beyond default sidebar

Skip bookmarks if PDF has no embedded bookmarks or only needs simple page navigation.

Prerequisites

Before using bookmark features, ensure:

• enableBookmark property is set to true on the ejs-pdfviewer element
• BookmarkViewService is injected into the component providers
• The PDF document contains embedded bookmarks (many PDFs don't have them)

Enabling Bookmarks

import { Component, ViewChild } from '@angular/core';
import { PdfViewerComponent, BookmarkViewService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `
    <ejs-pdfviewer #pdfViewer id="pdfViewer"
      [documentPath]="document"
      [enableBookmark]="true"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [BookmarkViewService]
})
export class AppComponent {
  @ViewChild('pdfViewer') public pdfViewer: PdfViewerComponent;
  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
}

What happens: Bookmarks load automatically, sidebar panel appears with hierarchy, and all bookmark API methods become available.

API Methods

1. goToBookmark()

Signature: this.pdfViewer.bookmark.goToBookmark(pageIndex: number, y: number): void

Navigates to specific page and Y coordinate based on bookmark location.

Parameters:

• pageIndex (number): Zero-based page index (0 = first page)
• y (number): Vertical pixel coordinate (0 = top of page)

public navigateToBookmark(): void {
  const pageIndex = 0; // First page
  const yCoordinate = 150; // 150 pixels from top
  this.pdfViewer.bookmark.goToBookmark(pageIndex, yCoordinate);
}

Usage with button:

<button (click)="navigateToBookmark()">Go to Chapter 1</button>

2. getBookmarks()

Signature: this.pdfViewer.bookmark.getBookmarks(): any[]

Retrieves all bookmarks as hierarchical array. Returns empty array [] if no bookmarks exist.

public retrieveBookmarks(): void {
  const bookmarks = this.pdfViewer.bookmark.getBookmarks();
  console.log('Available bookmarks:', bookmarks);
  
  if (bookmarks && bookmarks.length > 0) {
    bookmarks.forEach(bookmark => {
      console.log(`Title: ${bookmark.title}, Page: ${bookmark.page}`);
    });
  } else {
    console.log('No bookmarks found in this PDF');
  }
}

Open/close bookmark pane programmatically

Approach 1: Use isBookmarkPanelOpen property on PDF Viewer instance. Setting it to true opens the bookmark panel. Using it during initialization opens the bookmark panel on load

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { PdfViewerComponent, BookmarkViewService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `
    <button (click)="openBookmarkPanel()">Open Bookmark Panel</button>
    <button (click)="closeBookmarkPanel()">Open Bookmark Panel</button>
    
    <ejs-pdfviewer #pdfViewer id="pdfViewer"
      [documentPath]="document"
      [enableBookmark]="true"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [BookmarkViewService]
})
export class AppComponent {
  @ViewChild('pdfViewer') public pdfViewer: PdfViewerComponent;
  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  
  public openBookmarkPanel(): void {
    this.pdfViewer.isBookmarkPanelOpen = true;
  }
  
  public closeBookmarkPanel(): void {
    this.pdfViewer.isBookmarkPanelOpen = false;
  }
}

Approach 2: Use openBookmarkPane() of bookmark module to open bookmark panel and use closeBookmarkPane() of bookmark module to close bookmark panel.

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { PdfViewerComponent, BookmarkViewService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `
    <button (click)="openBookmarkPanel()">Open Bookmark Panel</button>
    <button (click)="closeBookmarkPanel()">Open Bookmark Panel</button>
    
    <ejs-pdfviewer #pdfViewer id="pdfViewer"
      [documentPath]="document"
      [enableBookmark]="true"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [BookmarkViewService]
})
export class AppComponent {
  @ViewChild('pdfViewer') public pdfViewer: PdfViewerComponent;
  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  
  public openBookmarkPanel(): void {
    this.pdfViewer.bookmark.openBookmarkPane();
  }
  
  public closeBookmarkPanel(): void {
    this.pdfViewer.bookmark.closeBookmarkPane();
  }
}

Complete Examples

Example 1: Navigate to Specific Bookmark

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { PdfViewerComponent, BookmarkViewService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `
    <button (click)="goToChapterOne()">Go to Chapter 1</button>
    <button (click)="goToChapterTwo()">Go to Chapter 2</button>
    
    <ejs-pdfviewer #pdfViewer id="pdfViewer"
      [documentPath]="document"
      [enableBookmark]="true"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [BookmarkViewService]
})
export class AppComponent {
  @ViewChild('pdfViewer') public pdfViewer: PdfViewerComponent;
  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  
  public goToChapterOne(): void {
    this.pdfViewer.bookmark.goToBookmark(0, 0);
  }
  
  public goToChapterTwo(): void {
    this.pdfViewer.bookmark.goToBookmark(10, 50);
  }
}

Example 2: Retrieve and Display Bookmarks

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { PdfViewerComponent, BookmarkViewService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `
    <button (click)="retrieveBookmarks()">Get All Bookmarks</button>
    <div *ngIf="bookmarkList.length > 0">
      <h3>Table of Contents</h3>
      <ul>
        <li *ngFor="let bookmark of bookmarkList" (click)="navigateTo(bookmark)">
          {{ bookmark.title }} (Page {{ bookmark.page + 1 }})
        </li>
      </ul>
    </div>
    
    <ejs-pdfviewer #pdfViewer id="pdfViewer"
      [documentPath]="document"
      [enableBookmark]="true"
      style="height:640px;display:block">
    </ejs-pdfviewer>
  `,
  providers: [BookmarkViewService]
})
export class AppComponent implements AfterViewInit {
  @ViewChild('pdfViewer') public pdfViewer: PdfViewerComponent;
  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public bookmarkList: any[] = [];
  
  ngAfterViewInit(): void {
    // Wait for document to load before retrieving bookmarks
    setTimeout(() => {
      this.retrieveBookmarks();
    }, 1500);
  }
  
  public retrieveBookmarks(): void {
    const bookmarks = this.pdfViewer.bookmark.getBookmarks();
    this.bookmarkList = bookmarks || [];
    console.log('Bookmarks retrieved:', this.bookmarkList);
  }
  
  public navigateTo(bookmark: any): void {
    this.pdfViewer.bookmark.goToBookmark(bookmark.page, bookmark.y);
  }
}

Example 3: Custom Bookmark Sidebar

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { PdfViewerComponent, BookmarkViewService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `
    <div style="display: flex; height: 100vh;">
      <div style="width: 250px; overflow-y: auto; border-right: 1px solid #ccc; padding: 10px;">
        <h3>Bookmarks</h3>
        <div *ngIf="bookmarks.length === 0">
          <p>No bookmarks available</p>
        </div>
        <ul style="list-style: none; padding: 0;">
          <li *ngFor="let bookmark of bookmarks" 
              style="margin-bottom: 8px; cursor: pointer;"
              (click)="handleBookmarkClick(bookmark)">
            <button style="width: 100%; text-align: left;">
              {{ bookmark.title }}
            </button>
            <ul *ngIf="bookmark.children && bookmark.children.length > 0" 
                style="list-style: none; padding-left: 15px;">
              <li *ngFor="let child of bookmark.children" 
                  style="margin-top: 5px; cursor: pointer;"
                  (click)="handleBookmarkClick(child); $event.stopPropagation()">
                <button style="width: 100%; text-align: left; font-size: 0.9em;">
                  {{ child.title }}
                </button>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      
      <div style="flex: 1;">
        <ejs-pdfviewer #pdfViewer id="pdfViewer"
          [documentPath]="document"
          [enableBookmark]="true"
          (documentLoad)="onDocumentLoad()"
          style="height:100%;display:block">
        </ejs-pdfviewer>
      </div>
    </div>
  `,
  providers: [BookmarkViewService]
})
export class AppComponent {
  @ViewChild('pdfViewer') public pdfViewer: PdfViewerComponent;
  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public bookmarks: any[] = [];
  
  public onDocumentLoad(): void {
    setTimeout(() => {
      const allBookmarks = this.pdfViewer.bookmark.getBookmarks();
      this.bookmarks = allBookmarks || [];
    }, 1000);
  }
  
  public handleBookmarkClick(bookmark: any): void {
    if (bookmark.page !== undefined && bookmark.y !== undefined) {
      this.pdfViewer.bookmark.goToBookmark(bookmark.page, bookmark.y);
    }
  }
}

Bookmark Data Structure

Each bookmark object returned by getBookmarks() has:

[
  {
    title: "Chapter 1",
    page: 0,
    y: 150,
    children: [
      { title: "Section 1.1", page: 2, y: 200, children: [] },
      { title: "Section 1.2", page: 5, y: 100, children: [] }
    ]
  },
  {
    title: "Chapter 2",
    page: 10,
    y: 50,
    children: []
  }
]

Best Practices

1. Always validate viewer reference before calling methods:

   if (this.pdfViewer && this.pdfViewer.bookmark) {
     this.pdfViewer.bookmark.goToBookmark(0, 0);
   }

2. Wait for PDF to load before accessing bookmarks:

• Use documentLoad event or setTimeout with adequate delay (1-1.5s)

   public onDocumentLoad(): void {
     setTimeout(() => {
       const bookmarks = this.pdfViewer.bookmark.getBookmarks();
       this.bookmarkList = bookmarks || [];
     }, 1000);
   }

3. Handle PDFs with no bookmarks gracefully:

• getBookmarks() returns [] if no bookmarks exist

   const bookmarks = this.pdfViewer.bookmark.getBookmarks();
   if (!bookmarks || bookmarks.length === 0) {
     console.log('No bookmarks available');
   }

4. Cache bookmarks in component property:

• Call getBookmarks() once on document load, store result, reuse

5. Validate data before navigation:

   public navigateToBookmark(bookmark: any): void {
     if (typeof bookmark.page === 'number' && typeof bookmark.y === 'number') {
       this.pdfViewer.bookmark.goToBookmark(bookmark.page, bookmark.y);
     }
   }

6. Inject BookmarkViewService in providers:

• Bookmark features only work when BookmarkViewService is injected in the component providers array

7. Use AfterViewInit lifecycle hook:

• Access viewer component methods after view initialization

   ngAfterViewInit(): void {
     setTimeout(() => {
       // Safe to call bookmark methods here
     }, 1500);
   }

Download in Angular PDF Viewer component

Brief: The Angular PDF Viewer component provides download functionality to save the currently loaded PDF document. Users can download PDFs either through the toolbar button or programmatically using the download method.

Table of Contents

• Enable Download
• Programmatic Download
• Download Filename
• Related Features

Enable Download

The download feature allows users to save the currently loaded PDF document to their local system.

Property

enableDownload

Type

boolean

Default Value

true

Usage

import { Component, OnInit } from '@angular/core';
import { LinkAnnotationService, BookmarkViewService, MagnificationService,
         ThumbnailViewService, ToolbarService, NavigationService,
         TextSearchService, AnnotationService, TextSelectionService,
         PrintService
       } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-container',
  template: `<div class="content-wrapper">
               <ejs-pdfviewer id="pdfViewer"
                        [enableDownload]='true'
                        [documentPath]='document'
                        style="height:640px;display:block">
               </ejs-pdfviewer>
            </div>`,
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               AnnotationService, TextSearchService, TextSelectionService,
               PrintService]
})
export class AppComponent implements OnInit {
    public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
}

Note

When enabled, the download button appears in the PDF Viewer toolbar. This property works for both standalone and server-backed viewer modes.

---

Programmatic Download

Trigger a download action programmatically without user interaction with the toolbar button.

Method

download()

Usage

<script>
    window.onload = function () {
        var pdfViewer = document.getElementById('pdfviewer').ej2_instances[0];
        pdfViewer.download();
    }
</script>

Note

This method initiates the download of the currently loaded PDF document. Useful for implementing custom download buttons or automated save operations in your application workflow.

---

Download Filename

Specify the filename for the downloaded PDF document.

Property

downloadFileName

Type

string

Usage

<ejs-pdfviewer id="pdfViewer"
         [downloadFileName]='customFileName'
         [documentPath]='document'
         style="height:640px;display:block">
</ejs-pdfviewer>

Note

The filename can be set to provide a meaningful name for the downloaded file. If not specified, the default filename from the document or a generic name will be used.

---

Related Features

Toolbar Configuration

The download button can be customized as part of the toolbar settings. Refer to the toolbar items documentation for controlling the visibility and behavior of the download button within the toolbar.

Feature Modules

The download functionality requires specific service providers to be injected. Ensure the necessary feature modules like ToolbarService are included in your component providers for the download feature to work properly.

Events in Angular PDF Viewer

Reference: Official Syncfusion Angular PDF Viewer documentation on Events - comprehensive guide covering all event triggers for document lifecycle, navigation, annotations, forms, and user interactions

Brief: The Syncfusion Angular PDF Viewer component triggers multiple events that allow you to respond to user interactions and control the PDF viewing experience. These events include document loading, download, import/export, annotations, signatures, printing, form validation, text search and selection, hyperlinks, and page navigation.

How to Use Events in Angular PDF Viewer

// app.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.html'
})
export class AppComponent {
  public onEventName(args: EventArgs): void {
    // Event handling logic here
  }
}

<!-- app.html -->
<ejs-pdfviewer
  id="pdfViewer"
  [documentPath]="documentPath"
  (eventName)="onEventName($event)"
  style="height: 600px">
</ejs-pdfviewer>

List of Events

---

PdfKeys

---

PdfModifierKeys