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.