Angular

Search results

PdfViewerComponent

ejs-pdfviewer represents the Angular PdfViewer Component.

<ejs-pdfviewer></ejs-pdfviewer>

Properties

DropdownFieldSettings
`DropdownFieldSettingsModel`

Get or set the dropdown field settings.

accessibilityTags
`AccessibilityTags`

Gets the Accessibility Tags object of the pdf viewer.

ajaxRequestSettings
`AjaxRequestSettingsModel`

Defines the ajax Request settings of the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [ajaxRequestSettings]="ajaxSettings"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public ajaxSettings = {
    // HTTP header "X-Custom-Header": "Custom header value" // Custom HTTP header
    ajaxHeaders: [
      {
        headerName: "Authorization",
        headerValue: "Bearerabcdefghijklmnopqrstuvwxyz",
      },
    ],

    withCredentials: false,
  };
  ngOnInit(): void {}
}

annotation
`Annotation`

Gets the annotation object of the pdf viewer.

annotationCollection
`any[]`

Get the Loaded document annotation Collections in the PdfViewer control.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="annotCollection()">Log Annotation Collection</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  annotCollection() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs the annotation collection.
    console.log(viewer.annotationCollection);
  }
}

annotationSelectorSettings
`AnnotationSelectorSettingsModel`

Defines the settings of annotation selector.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [annotationSelectorSettings]="annotationSelection"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the annotation selection settings.
  public annotationSelection = {
    selectionBorderColor: 'blue', 
    resizerBorderColor: 'red', 
    resizerFillColor: '#4070ff', 
    resizerSize: 8, 
    selectionBorderThickness: 1, 
    resizerShape: 'Circle', 
    selectorLineDashArray: [5, 6], 
    resizerLocation: AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
    resizerCursorType: CursorType.grab 
  };
  ngOnInit(): void {}
}

annotationSettings
`AnnotationSettingsModel`

Defines the settings of the annotations.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [annotationSettings]="annotation"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the annotation settings.
  public annotation = {
    author: "XYZ",
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false,
    skipPrint: false,
    skipDownload: false,
    allowedInteractions: ["Resize"],
  };
  ngOnInit(): void {}
}

areaSettings
`AreaSettingsModel`

Defines the settings of area annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [areaSettings]="area"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the area annotation settings.
  public area = {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false,
    annotationSelectorSettings: {
      selectionBorderColor: "",
      resizerBorderColor: "black",
      resizerFillColor: "#4070ff",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

arrowSettings
`ArrowSettingsModel`

Defines the settings of arrow annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [arrowSettings] = "arrow'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the arrow annotation settings.
  public arrow = {
    opacity: 1,
    fillColor: "#9c2592",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    borderDashArray: 1,
    lineHeadStartStyle: "Closed",
    lineHeadEndStyle: "Closed",
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

bookmark
`BookmarkView`

Gets the bookmark view object of the pdf viewer.

checkBoxFieldSettings
`CheckBoxFieldSettingsModel`

Get or set the check box field settings.

circleSettings
`CircleSettingsModel`

Defines the settings of circle annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [circleSettings] = "circle'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the circle annotation settings.
  public circle = {
    opacity: 1,
    fillColor: "#9c2592",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "red",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

commandManager
`CommandManagerModel`

Defines a set of custom commands and binds them with a set of desired key gestures.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  PdfKeys,
  ModifierKeys,
} 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"
      [libraryPath]="libraryPath"
      [documentPath]="document"
	  (documentLoad)='documentLoaded($event)'
	  (customContextMenuSelect)='customContextMenuSelect($event)'
	  (customContextMenuBeforeOpen)='customContextMenuBeforeOpen($event)'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public libraryPath = "http://localhost:4200/assets/ej2-pdfviewer-lib";
  public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  Public commandManager = {
        keyboardCommand: [{
            name: 'customCopy',
            gesture: {
                pdfKeys: PdfKeys.G,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
            }
        },
        {
            name: 'customPaste',
            gesture: {
                pdfKeys: PdfKeys.H,
                modifierKeys: ModifierKeys.Shift | ModifierKeys.Alt
            }
        }]
  };
  ngOnInit(): void {}
     
	 public keyboardCustomCommands(e: LoadEventArgs): void {
	 }
}

Defaults to {}

contextMenuOption
`ContextMenuAction`

Specifies the state of the ContextMenu in the PDF document.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [contextMenuOption]="openContext"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the settings of the context menu option.
  public openContext = "None";
  ngOnInit(): void {}
}

Defaults to RightClick

contextMenuSettings
`ContextMenuSettingsModel`

Defines the context menu settings.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  ContextMenuItem,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [ContextMenuItem]="contextMenu"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the context menu settings.
  public contextMenu = {
    contextMenuAction: "RightClick",
    contextMenuItems: [
      ContextMenuItem.Comment,
      ContextMenuItem.Copy,
      ContextMenuItem.Cut,
      ContextMenuItem.Delete,
      ContextMenuItem.Highlight,
      ContextMenuItem.Paste,
      ContextMenuItem.Properties,
      ContextMenuItem.ScaleRatio,
      ContextMenuItem.Strikethrough,
      ContextMenuItem.Underline,
    ],
  };
  ngOnInit(): void {}
}

currentPageNumber
`number`

Returns the current page number of the document displayed in the PdfViewer control.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="currentPage()">Current Page Number</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      [currentPageNumber]="currentPageNumber"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
  
}

Defaults to 0

customFonts
`string[]`

Specifies a collection of font names as strings. These fonts must be located in the resourceUrl folder.

Defaults to []

customStamp
`CustomStampModel[]`

Defines the stamp items of the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [customStamp]="custom"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Add your custom stamp image source as base64 image.
  public custom = [
    {
      customStampName: "Sample",
      customStampImageSource: "data:image/png;base64, Syncfusion pdf viewer",
    },
  ];
  ngOnInit(): void {}
}

customStampSettings
`CustomStampSettingsModel`

Defines the settings of customStamp annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [customStampSettings]="customStamp"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the custom stamp settings.
  public customStamp = {
    opacity: 1,
    author: "XYZ",
    width: 100, 
    height: 100, 
    left: 200, 
    top: 200, 
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100,
    isLock: false,
    enableCustomStamp: true,
    allowedInteractions: ["None"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

dateTimeFormat
`string`

Customize desired date and time format

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [dateTimeFormat]="dateTime"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the date time format.
  public dateTime = "yyyy-MM-dd HH:mm:ss";
  ngOnInit(): void {}
}

designerMode
`boolean`

Enable or disable the interaction of form fields in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [designerMode]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

disableContextMenuItems
`ContextMenuItem[]`

Disables the menu items in the context menu.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  ContextMenuItem,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [disableContextMenuItems]="disableContext"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Show or hide the context menu items.
  public disableContext = [ContextMenuItem.Copy, ContextMenuItem.Highlight];
  ngOnInit(): void {}
}

Defaults to []

distanceSettings
`DistanceSettingsModel`

Defines the settings of distance annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  CursorType,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [distanceSettings]="distance"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the distance annotation settings.
  public distance = {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "Guest",
    thickness: 1,
    borderDashArray: 1,
    lineHeadStartStyle: "Closed",
    lineHeadEndStyle: "Closed",
    annotationSelectorSettings: {
      selectionBorderColor: "",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false,
    leaderLength: 40,
    resizeCursorType: CursorType.move,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

documentPath
`string`

Sets the PDF document path for initial loading.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

downloadFileName
`string`

Gets or sets the download file name in the PdfViewer control.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [downloadFileName]="DownloadDocument"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public DownloadDocument = "documentDownloaded";
  ngOnInit(): void {}
}

enableAccessibilityTags
`boolean`

Determines whether accessibility tags are enabled or disabled. Accessibility tags can help make web content more accessible to users with disabilities.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AccessibilityTagsService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableAccessibilityTags]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
    AccessibilityTagsService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableAnnotation
`boolean`

Enable or disable the annotation in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableAnnotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableAnnotationToolbar
`boolean`

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableAnnotationToolbar]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableAutoComplete
`boolean`

Enable or disables the auto complete option in form documents.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableAutoComplete]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableBookmark
`boolean`

Enables or disables the bookmark view in the PDF viewer

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableBookmark]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableBookmarkStyles
`boolean`

Enables or disables the bookmark styles in the PDF viewer

Defaults to false

enableCommentPanel
`boolean`

Enable or disables the Comment Panel of PdfViewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableCommentPanel]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableDesktopMode
`boolean`

Gets or sets a boolean value to show or hide desktop toolbar in mobile devices.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableDesktopMode]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

enableDownload
`boolean`

Enable or disables the download option of PdfViewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableDownload]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableFormDesigner
`boolean`

Show or hide the form designer tool in the main toolbar of the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableFormDesigner]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableFormDesignerToolbar
`boolean`

Opens the form designer toolbar when the PDF document is loaded in the PDF Viewer control initially.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableFormDesignerToolbar]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableFormFields
`boolean`

Enable or disable the form fields in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableFormFields]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableFormFieldsValidation
`boolean`

Enable or disable the form fields validation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableFormFieldsValidation]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

enableFreeText
`boolean`

Enable or disable the free text annotation in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableFreeText]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableHandwrittenSignature
`boolean`

Enables or disables the handwritten signature in PDF document.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableHandwrittenSignature]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableHyperlink
`boolean`

Enables or disables the hyperlinks in PDF document.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableHyperlink]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableImportAnnotationMeasurement
`boolean`

Enable or disable the customization of measure values in PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableImportAnnotationMeasurement]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableInkAnnotation
`boolean`

If it is set as false, then the ink annotation support in the PDF Viewer will be disabled. By default it is true.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableInkAnnotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableLocalStorage
`boolean`

Enable or disable session storage for PDF Viewer data. When true, the PDF Viewer stores data in an internal collection instead of session storage. When false, the default session storage mechanism is used. Remarks:

Setting enableLocalStorage to true stores all session-specific data (e.g., form fields, annotations, signatures) in memory, increasing memory usage based on the document size and content complexity.
Larger documents or those with more interactive elements will consume more memory.
Ensure proper cleanup by destroying the PDF Viewer instance when no longer needed to avoid memory leaks.

Defaults to false

enableMagnification
`boolean`

Enable or disable the Magnification module of PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableMagnification]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableMeasureAnnotation
`boolean`

Enable or disable the calibrate annotation in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableMeasureAnnotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableMultiLineOverlap
`boolean`

Enable or disable the multi line text markup annotations in overlapping collections.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableMultiLineOverlap]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

enableMultiPageAnnotation
`boolean`

Enables or disables the multi-page text markup annotation selection in UI.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableMultiPageAnnotation]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

enableNavigation
`boolean`

Enable or disable the Navigation module of PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableNavigation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableNavigationToolbar
`boolean`

Enable or disables the Navigation toolbar of PdfViewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableNavigationToolbar]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enablePageOrganizer
`boolean`

Enable or disable the page organizer in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enablePageOrganizer]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
    PageOrganizerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

Defaults to false

enablePinchZoom
`boolean`

Enable or disable the pinch zoom option in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enablePinchZoom]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enablePrint
`boolean`

Enable or disables the print option of PdfViewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enablePrint]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enablePrintRotation
`boolean`

If it is set as FALSE, will suppress the page rotation of Landscape document on print action. By default it is TRUE.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enablePrintRotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

enableShapeAnnotation
`boolean`

Enable or disable the shape annotation in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableShapeAnnotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableShapeLabel
`boolean`

Enable or disable the Label for shapeAnnotations of PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableShapeLabel]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

enableStampAnnotations
`boolean`

Enables and disable the stamp annotations when the PDF viewer control is loaded initially.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableStampAnnotations]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableStickyNotesAnnotation
`boolean`

Enables and disable the stickyNotes annotations when the PDF viewer control is loaded initially.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableStickyNotesAnnotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableTextMarkupAnnotation
`boolean`

Enable or disable the text markup annotation in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableTextMarkupAnnotation]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableTextMarkupResizer
`boolean`

Enable or disable the text markup resizer to modify the bounds in UI.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableTextMarkupResizer]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

enableTextSearch
`boolean`

Enable or disable the text search in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableTextSearch]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableTextSelection
`boolean`

Enable or disable the text selection in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableTextSelection]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableThumbnail
`boolean`

Enables or disables the thumbnail view in the PDF viewer

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableThumbnail]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableToolbar
`boolean`

Enable or disables the toolbar of PdfViewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableToolbar]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

enableZoomOptimization
`boolean`

Enable or disable the zoom optimization mode in PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [enableZoomOptimization]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

exportAnnotationFileName
`string`

Gets or sets the export annotations JSON file name in the PdfViewer control.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [exportAnnotationFileName]="exportAnnotFileName"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public exportAnnotFileName = "exportedAnnotation";
  ngOnInit(): void {}
}

fileName
`string`

Gets or sets the document name loaded in the PdfViewer control.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="name()">Log file name</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  name() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs the file name.
    console.log(viewer.fileName);
  }
}

formDesigner
`FormDesigner`

Gets the FormDesigner object of the pdf viewer.

formFieldCollections
`FormFieldModel[]`

Gets the form fields present in the loaded PDF document. It used to get the form fields id, name, type and it’s values.

freeTextSettings
`FreeTextSettingsModel`

Defines the settings of free text annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [freeTextSettings]="freetext"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the freetext annotation settings.
  public freetext = {
    opacity: 1,
    fillColor: "#ffffff00",
    borderColor: "#4070ff",
    author: "XYZ",
    borderWidth: 1,
    width: 151,
    fontSize: 16,
    height: 24.6,
    fontColor: "#000",
    fontFamily: "Helvetica",
    defaultText: "Type Here",
    textAlignment: "Right",
    fontStyle: FontStyle.Italic,
    allowTextOnly: false,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: null,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    allowedInteractions: ["None"],
    isPrint: true,
    isReadonly: false,
    enableAutoFit: false,
  };
  ngOnInit(): void {}
}

handWrittenSignatureSettings
`HandWrittenSignatureSettingsModel`

Defines the settings of handWrittenSignature.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  DisplayMode,
  CursorType
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [handWrittenSignatureSettings]="handWritten"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the hand written signature settings.
  public handWritten = {
    signatureItem: ["Signature", "Initial"],
    saveSignatureLimit: 1,
    saveInitialLimit: 1,
    opacity: 1,
    strokeColor: "#000000",
    width: 150,
    height: 100,
    thickness: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    allowedInteractions: ["Resize"],
    signatureDialogSettings: {
      displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
      hideSaveSignature: false,
    },
    initialDialogSettings: {
      displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
      hideSaveSignature: false,
    },
  };
  ngOnInit(): void {}
}

height
`string` | `number`

Defines the scrollable height of the PdfViewer control.

Defaults to ‘auto’

hideSaveSignature
`boolean`

Gets or sets a boolean value to show or hide the save signature check box option in the signature dialog. FALSE by default

Defaults to false

highlightSettings
`HighlightSettingsModel`

Defines the settings of highlight annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [highlightSettings]="highlight"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public highlight = {
    opacity: 1,
    color: "#DAFF56",
    author: "XYZ",
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
    },
    isLock: false,
    enableMultiPageAnnotation: false,
    enableTextMarkupResizer: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

hyperlinkOpenState
`LinkTarget`

Specifies the open state of the hyperlink in the PDF document.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [hyperlinkOpenState]="openLink"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public openLink = "NewWindow";

  ngOnInit(): void {}
}

Defaults to CurrentTab

initialDialogSettings
`SignatureDialogSettingsModel`

Get or set the signature dialog settings for initial field.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  DisplayMode,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [initialDialogSettings]="intialDialog"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the initial dialog settings.
  public intialDialog = {
    displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
    hideSaveSignature: true,
  };
  ngOnInit(): void {}
}

initialFieldSettings
`InitialFieldSettingsModel`

Get or set the initial field settings.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  DisplayMode,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [initialFieldSettings]="initialSettings"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the signature dialog settings.
  public initialSettings = {
    typeSignatureFonts: ['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
  };
  ngOnInit(): void {}
}

initialRenderPages
`number`

Initially renders the first N pages of the PDF document when the document is loaded.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AccessibilityTagsService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [initialRenderPages]="4"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
    AccessibilityTagsService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to 2

inkAnnotationSettings
`InkAnnotationSettingsModel`

Defines the ink annotation settings for PDF Viewer.It used to customize the strokeColor, thickness, opacity of the ink annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  DisplayMode,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [inkAnnotationSettings]="inkAnnotation"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the ink annotation settings.
  public inkAnnotation = {
    author: "XYZ",
    opacity: 1,
    strokeColor: "#ff0000",
    thickness: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

interactionMode
`InteractionMode`

Sets the interaction mode of the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [interactionMode]="interactMode"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public interactMode = "Pan";
  ngOnInit(): void {}
}

Defaults to TextSelection

isAnnotationToolbarOpen
`boolean`

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially.

Defaults to false

isAnnotationToolbarVisible
`boolean`

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially and get the annotation Toolbar Visible status.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isAnnotationToolbarVisible]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isBookmarkPanelOpen
`boolean`

Gets or sets a boolean value to show or hide the bookmark panel while loading a document.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isBookmarkPanelOpen]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isCommandPanelOpen
`boolean`

If it set as true, then the command panel show at initial document loading in the PDF viewer

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isCommandPanelOpen]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isDocumentEdited
`boolean`

Checks whether the PDF document is edited.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="documentEdited()">Is document edited</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  documentEdited() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs whether the PDF document is edited.
    console.log("Is the document edited - " + viewer.isDocumentEdited);
  }
}

isExtractText
`boolean`

Enable or disable the text extract from the PDF viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isExtractText]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isFormDesignerToolbarVisible
`boolean`

Opens the annotation toolbar when the PDF document is loaded in the PDF Viewer control initially and get the annotation Toolbar Visible status.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isFormDesignerToolbarVisible]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isFormFieldDocument
`boolean`

Enable if the PDF document contains form fields.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="isFormFieldDocument()">
      Show whether form fields present in the document
    </button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  freeText() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs the presence of form fields in a document.
    console.log(
      "Is form fields exist in the document - " + viewer.isFormFieldDocument
    );
  }
}

Defaults to false

isMaintainSelection
`boolean`

Maintain the selection of text markup annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isMaintainSelection]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isPageOrganizerOpen
`boolean`

Specifies whether the page organizer dialog will be displayed upon the initial document loading in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isPageOrganizerOpen]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
    PageOrganizerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isSignatureEditable
`boolean`

Enables or disable saving Hand Written signature as editable in the PDF.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isSignatureEditable]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isThumbnailViewOpen
`boolean`

If it set as true, then the thumbnail view show at initial document loading in the PDF Viewer

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [isThumbnailViewOpen]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

isValidFreeText
`boolean`

Checks if the freeText value is valid or not.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="freeText()">
      Show is free text is valid or not
    </button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  freeText() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs the signature collection.
    console.log(viewer.isValidFreeText);
  }
}

Defaults to false

lineSettings
`LineSettingsModel`

Defines the settings of line annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [lineSettings] = "line'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the line annotation settings.
  public line = {
    opacity: 1,
    color: "#9c2592",
    fillColor: '#ffffff00',
    strokeColor: '#ff0000',
    author: "XYZ",
    thickness: 1,
    borderDashArray: 1, 
    lineHeadStartStyle: 'None', 
    lineHeadEndStyle: 'None',
    annotationSelectorSettings: {
        selectionBorderColor: "blue",
        resizerBorderColor: "black",
        resizerFillColor: "#FF4081",
        resizerSize: 8,
        selectionBorderThickness: 1,
        resizerShape: "Square",
        selectorLineDashArray: [5, 6],
        resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges, 
        resizerCursorType: CursorType.grab
    },
    minHeight: 10, 
    minWidth: 10, 
    maxWidth: 100, 
    maxHeight: 100, 
    isLock: false, 
    allowedInteractions: ['Resize'], 
    isPrint: true 
  };
  ngOnInit(): void {}
}

listBoxFieldSettings
`ListBoxFieldSettingsModel`

Get or set the listbox field settings.

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

magnification
`Magnification`

Gets the magnification object of the pdf viewer.

maxZoom
`number`

Specifies the maximum allowable zoom level for the control, with a default value of 400.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [maxZoom]="maxZoom"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public maxZoom = 270;
  ngOnInit(): void {}
}

Defaults to 400

measurementSettings
`MeasurementSettingsModel`

Defines the settings of measurement annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [measurementSettings]="measurement"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the measurement settings.
  public measurement = {
    conversionUnit: "cm",
    displayUnit: "cm",
    scaleRatio: 1,
    depth: 96,
  };
  ngOnInit(): void {}
}

minZoom
`number`

Specifies the minimum acceptable zoom level for the control, with a default value of 10.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [minZoom]="minZoom"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public minZoom = 45;
  ngOnInit(): void {}
}

Defaults to 10

Gets the navigation object of the pdf viewer.

pageCount
`number`

gets the page count of the document loaded in the PdfViewer control.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="count()">Page Count</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  count() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs the total page count of the loaded document.
    console.log("Total page count is - " + viewer.pageCount);
  }
}

Defaults to 0

pageOrganizer
`PageOrganizer`

Gets the page organizer object of the PDF Viewer.

pageOrganizerSettings
`PageOrganizerSettingsModel`

This property allows for control over various page management functionalities within the PDF Viewer. By setting it to true, users will be able to delete, insert, rotate pages, rearrange pages. Conversely, setting it to false will disable these actions.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  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"
      [serviceUrl]="service"
      [documentPath]="document"
      [pageOrganizerSettings]="organizerSettings"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
    PageOrganizerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the page organizer settings.
  public organizerSettings = { 
            canInsert: true, 
            canRotate: false, 
            canDelete: true,
            canCopy: true,
            canRearrange: true,
            canImport: true
            };
  ngOnInit(): void {}
}

passwordFieldSettings
`PasswordFieldSettingsModel`

Get or set the password field settings.

perimeterSettings
`PerimeterSettingsModel`

Defines the settings of perimeter annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [perimeterSettings]="perimeter"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the perimeter annotation settings.
  public perimeter = {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    borderDashArray: 1,
    lineHeadStartStyle: "Open",
    lineHeadEndStyle: "Open",
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    annotationSelectorSettings: {
      selectionBorderColor: "",
      resizerBorderColor: "black",
      resizerFillColor: "#4070ff",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

polygonSettings
`PolygonSettingsModel`

Defines the settings of polygon annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [polygonSettings]="polygon"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the polygon annotation settings.
  public polygon = {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

print
`Print`

Gets the print object of the pdf viewer.

printMode
`PrintMode`

Specifies the print mode in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [printMode]="print"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public print = "NewWindow";
  ngOnInit(): void {}
}

Defaults to Default

printScaleFactor
`number`

Specifies the document printing quality. The default printing quality is set to 1.0. This limit varies from 0.5 to 5.0. If an invalid value is specified, the default value of 1.0 will be used. For documents with smaller page dimensions, a higher print quality is recommended. {% codeBlock src=‘pdfviewer/printScaleFactor/index.md’ %}{% endBlock %}

Defaults to 1.0

radioButtonFieldSettings
`RadioButtonFieldSettingsModel`

Get or set the radio button field settings.

radiusSettings
`RadiusSettingsModel`

Defines the settings of radius annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [radiusSettings]="radius"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the radius annotation settings.
  public radius = {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "red",
      resizerFillColor: "#4070ff",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

rectangleSettings
`RectangleSettingsModel`

Defines the settings of rectangle annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [rectangleSettings] = "rectangle'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public rectangle = {
    opacity: 1,
    fillColor: "#9c2592",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

resourceUrl
`string`

Set the resource URL for assets or the public directory. The standalone PDF Viewer will load its custom resources from this URL.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [resourceUrl]="resourceUrl"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public resourceUrl = "http://localhost:4200/assets/ej2-pdfviewer-lib";
  public document = "https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to ”

restrictZoomRequest
`boolean`

restrict zoom request.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [restrictZoomRequest]="true"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to false

retryCount
`number`

Specifies the retry count for the failed requests.

Defaults to 1

retryStatusCodes
`number[]`

Specifies the response status codes for retrying a failed request with a “3xx”, “4xx”, or “5xx” response status code. The value can have multiple values, such as [500, 401, 400], and the default value is 500.

Defaults to [500]

retryTimeout
`number`

Gets or sets the timeout for retries in seconds.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AccessibilityTagsService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [retryCount]="5"
      [retryTimeout]="10"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
    AccessibilityTagsService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to 0

scrollSettings
`ScrollSettingsModel`

Defines the scroll settings.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [scrollSettings]="scrollSet"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the scroll settings.
  public scrollSet = {
    delayPageRequestTimeOnScroll: 150,
  };
  ngOnInit(): void {}
}

selectedItems
`SelectorModel`

Defines the collection of selected items, size and position of the selector

Defaults to {}

serverActionSettings
`ServerActionSettingsModel`

Defines the settings of the PDF Viewer service.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [serverActionSettings]="serverAction"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public serverAction = {
    load: "Load",
    renderPages: "RenderPdfPages",
    unload: "Unload",
    download: "Download",
    renderThumbnail: "RenderThumbnailImages",
    print: "PrintImages",
    renderComments: "RenderAnnotationComments",
    importAnnotations: "ImportAnnotations",
    exportAnnotations: "ExportAnnotations",
    importFormFields: "ImportFormFields",
    exportFormFields: "ExportFormFields",
    renderTexts: "RenderPdfTexts",
  };
  ngOnInit(): void {}
}

serviceUrl
`string`

Defines the service url of the PdfViewer control.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

shapeLabelSettings
`ShapeLabelSettingsModel`

Defines the settings of shape label.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [shapeLabelSettings] = 'shapeLabel'
      [enableShapeLabel] = 'true';
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public shapeLabel = {
    opacity: 1,
    fillColor: "#9c2592",
    borderColor: "#ff0000",
    fontColor: "#000",
    fontSize: 16,
    labelHeight: 24.6,
    labelMaxWidth: 151,
    labelContent: "XYZ",
  };
  ngOnInit(): void {}
}

showDigitalSignatureAppearance
`boolean`

Show or hide the digital signature appearance in the document.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [showDigitalSignatureAppearance]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

showNotificationDialog
`boolean`

If it is set as false then error message box is not displayed in PDF viewer control.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [showNotificationDialog]="false"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}
}

Defaults to true

signatureCollection
`any[]`

Get the Loaded document signature Collections in the PdfViewer control.

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

@Component({
  selector: "app-root",
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
    <button #btn1 (click)="signCollection()">Log Signature Collection</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="service"
      [documentPath]="document"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  ngOnInit(): void {}

  signCollection() {
    let viewer = (<any>document.getElementById("pdfViewer")).ej2_instances[0];
    // Logs the signature collection.
    console.log(viewer.signatureCollection);
  }
}

signatureDialogSettings
`SignatureDialogSettingsModel`

Get or set the signature dialog settings for signature field.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  DisplayMode,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [signatureDialogSettings]="signatureDialog"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the signature dialog settings.
  public signatureDialog = {
    displayMode: DisplayMode.Draw | DisplayMode.Text | DisplayMode.Upload,
    hideSaveSignature: true,
  };
  ngOnInit(): void {}
}

signatureFieldSettings
`SignatureFieldSettingsModel`

Get or set the signature field settings.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  DisplayMode,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [signatureFieldSettings]="signatureSettings"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the signature dialog settings.
  public signatureSettings = {
    typeSignatureFonts: ['Allura', 'Tangerine', 'Sacramento', 'Inspiration']
  };
  ngOnInit(): void {}
}

signatureFitMode
`SignatureFitMode`

Specifies the signature mode in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [signatureFitMode]="fitMode"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public fitMode = "Stretch";
  ngOnInit(): void {}
}

Defaults to Default

stampSettings
`StampSettingsModel`

Defines the settings of stamp annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [stampSettings]="stamp"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the stamp annotation settings.
  public stamp = {
    opacity: 1,
    author: "XYZ",
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "red",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 5,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    dynamicStamps: [
      DynamicStampItem.Revised,
      DynamicStampItem.Reviewed,
      DynamicStampItem.Received,
      DynamicStampItem.Confidential,
      DynamicStampItem.Approved,
      DynamicStampItem.NotApproved,
    ],
    signStamps: [
      SignStampItem.Witness,
      SignStampItem.InitialHere,
      SignStampItem.SignHere,
      SignStampItem.Accepted,
      SignStampItem.Rejected,
    ],
    standardBusinessStamps: [
      StandardBusinessStampItem.Approved,
      StandardBusinessStampItem.NotApproved,
      StandardBusinessStampItem.Draft,
      StandardBusinessStampItem.Final,
      StandardBusinessStampItem.Completed,
      StandardBusinessStampItem.Confidential,
      StandardBusinessStampItem.ForPublicRelease,
      StandardBusinessStampItem.NotForPublicRelease,
      StandardBusinessStampItem.ForComment,
      StandardBusinessStampItem.Void,
      StandardBusinessStampItem.PreliminaryResults,
      StandardBusinessStampItem.InformationOnly,
    ],
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

stickyNotesSettings
`StickyNotesSettingsModel`

Defines the settings of stickyNotes annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [stickyNotesSettings]="sticky"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the sticky annotation settings.
  public sticky = {
    author: "XYZ",
    opacity: 1,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "red",
      resizerFillColor: "#4070ff",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    isLock: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

strikethroughSettings
`StrikethroughSettingsModel`

Defines the settings of strikethrough annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [strikethroughSettings] = "strikeThrough'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public strikeThrough = {
    opacity: 1,
    color: "#DAFF56",
    author: "XYZ",
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
    },
    isLock: false,
    enableMultiPageAnnotation: false,
    enableTextMarkupResizer: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

textFieldSettings
`TextFieldSettingsModel`

Get or set the text field settings.

textSearch
`TextSearch`

Gets the text search object of the pdf viewer.

textSearchColorSettings
`TextSearchColorSettingsModel`

Sets the settings for the color of the text search highlight.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [textSearchColorSettings]="textSearch"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the text search settings.
  public textSearch = {
    searchHighlightColor: "#4070ff",
    searchColor: "#FF4081",
  };
  ngOnInit(): void {}
}

textSelection
`TextSelection`

Gets the TextSelection object of the pdf viewer.

thumbnailView
`ThumbnailView`

Gets the thumbnail-view object of the pdf viewer.

tileRenderingSettings
`TileRenderingSettingsModel`

Defines the tile rendering settings.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [tileRenderingSettings]="tileRendering"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the tile rendering settings.
  public tileRendering = {
    enableTileRendering: false, 
    x: 0, 
    y: 0
  };
  ngOnInit(): void {}
}

Gets the toolbar object of the pdf viewer.

toolbarSettings
`ToolbarSettingsModel`

Defines the settings of the PDF Viewer toolbar.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [toolbarSettings]="toolSettings"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public toolSettings = {
    showTooltip: false,
    toolbarItems: [
      "OpenOption",
      "UndoRedoTool",
      "PageNavigationTool",
      "MagnificationTool",
      "PanTool",
      "SelectionTool",
      "CommentTool",
      "SubmitForm",
      "AnnotationEditTool",
      "FormDesignerEditTool",
      "FreeTextAnnotationOption",
      "InkAnnotationOption",
      "ShapeAnnotationOption",
      "StampAnnotation",
      "SignatureOption",
      "SearchOption",
      "PrintOption",
      "DownloadOption",
    ],
    annotationToolbarItems: [
      "HighlightTool",
      "UnderlineTool",
      "StrikethroughTool",
      "ColorEditTool",
      "OpacityEditTool",
      "AnnotationDeleteTool",
      "StampAnnotationTool",
      "HandWrittenSignatureTool",
      "InkAnnotationTool",
      "ShapeTool",
      "CalibrateTool",
      "StrokeColorEditTool",
      "ThicknessEditTool",
      "FreeTextAnnotationTool",
      "FontFamilyAnnotationTool",
      "FontSizeAnnotationTool",
      "FontStylesAnnotationTool",
      "FontAlignAnnotationTool",
      "FontColorAnnotationTool",
      "CommentPanelTool",
    ],
    formDesignerToolbarItems: [
      "TextboxTool",
      "PasswordTool",
      "CheckBoxTool",
      "RadioButtonTool",
      "DropdownTool",
      "ListboxTool",
      "DrawSignatureTool",
      "DeleteTool",
    ],
  };
  ngOnInit(): void {}
}

underlineSettings
`UnderlineSettingsModel`

Defines the settings of underline annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [underlineSettings] = "underLine'
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public underLine = {
    opacity: 1,
    color: "#9c2592",
    author: "XYZ",
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#FF4081",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Square",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
    },
    isLock: false,
    enableMultiPageAnnotation: false,
    enableTextMarkupResizer: false,
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

volumeSettings
`VolumeSettingsModel`

Defines the settings of volume annotation.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
  AnnotationResizerLocation,
  CursorType,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [volumeSettings]="volume"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  // Change the volume annotation settings.
  public volume = {
    opacity: 1,
    fillColor: "#ffffff00",
    strokeColor: "#ff0000",
    author: "XYZ",
    thickness: 1,
    minHeight: 10,
    minWidth: 10,
    maxWidth: 100,
    maxHeight: 100,
    isLock: false,
    annotationSelectorSettings: {
      selectionBorderColor: "blue",
      resizerBorderColor: "black",
      resizerFillColor: "#4070ff",
      resizerSize: 8,
      selectionBorderThickness: 1,
      resizerShape: "Circle",
      selectorLineDashArray: [5, 6],
      resizerLocation:
        AnnotationResizerLocation.Corners | AnnotationResizerLocation.Edges,
      resizerCursorType: CursorType.grab,
    },
    allowedInteractions: ["Resize"],
    isPrint: true,
  };
  ngOnInit(): void {}
}

width
`string` | `number`

Defines the scrollable width of the PdfViewer control.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [width]="width"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public width = 300;
  ngOnInit(): void {}
}

Defaults to ‘auto’

zoomMode
`ZoomMode`

Specifies the rendering mode in the PDF Viewer.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [zoomMode]="defaultZoom"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public defaultZoom = "FitToWidth";
  ngOnInit(): void {}
}

Defaults to Default

zoomPercentage
`number`

Returns the current zoom percentage of the PdfViewer control.

zoomValue
`number`

Sets the initial loading zoom value from 10 to 400 in the PDF Viewer Control.

import { Component, OnInit } from "@angular/core";
import {
  LinkAnnotationService,
  BookmarkViewService,
  MagnificationService,
  ThumbnailViewService,
  ToolbarService,
  NavigationService,
  AnnotationService,
  TextSearchService,
  TextSelectionService,
  PrintService,
  FormFieldsService,
  FormDesignerService,
} 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"
      [serviceUrl]="service"
      [documentPath]="document"
      [zoomValue]="zoom"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>`,
  providers: [
    LinkAnnotationService,
    BookmarkViewService,
    MagnificationService,
    ThumbnailViewService,
    ToolbarService,
    NavigationService,
    AnnotationService,
    TextSearchService,
    TextSelectionService,
    PrintService,
    FormFieldsService,
    FormDesignerService,
  ],
})
export class AppComponent implements OnInit {
  public service =
    "https://ej2services.syncfusion.com/production/web-services/api/pdfviewer";
  public document = "PDF_Succinctly.pdf";
  public zoom = 75;
  ngOnInit(): void {}
}

Defaults to 0

Methods

addAnnotation

Perform to add annotations in the PDF Viewer

Parameter	Type	Description
annotation	`any`	Specifies the annotation

Returns void

addCustomMenu

Adds a custom menu item to the existing menu, with optional configurations.

Parameter	Type	Description
menuItems	`MenuItemModel[]`	The custom menu item to be added.
disableDefaultItems (optional)	`boolean`	Optional. When set to true, this parameter disables the inclusion of default items in the menu. Defaults to false, meaning default items will be included.
appendToEnd (optional)	`boolean`	Optional. When set to true, the custom menu item will be added at the bottom of the existing menu list. If false or not provided, the item will be added at the default position.

Returns void

clearFormFields

Clears data from the form fields. Parameter - Specifies the form field object.

Parameter	Type	Description
formField (optional)	`any`	It describes about the form field

Returns void

convertClientPointToPagePoint

Convert user coordinates to the PDF page coordinates.

Parameter	Type	Description
clientPoint	`Point`	The user should provide a x, y coordinates.
pageNumber	`number`	We need to pass pageNumber.

Returns Point

convertPagePointToClientPoint

Convert page coordinates to the user coordinates.

Parameter	Type	Description
pagePoint	`Point`	The user should provide a page x, y coordinates.
pageNumber	`number`	We need to pass pageNumber.

Returns Point

convertPagePointToScrollingPoint

Convert page coordinates to the scrolling coordinates.

Parameter	Type	Description
pagePoint	`Point`	The user should provide a page x, y coordinates.
pageNumber	`number`	We need to pass pageNumber.

Returns Point

deleteAnnotations

To delete the annotation Collections in the PDF Document.

Returns void

destroy

Destroys all managed resources used by this object.

Returns void

download

Downloads the PDF document being loaded in the ejPdfViewer control.

Returns void

exportAnnotation

Perform export annotations action in the PDF Viewer

Parameter	Type	Description
annotationDataFormat (optional)	`AnnotationDataFormat`	-Gets the annotation data format

Returns void

exportAnnotationsAsBase64String

Export annotations and returns a base64 string for both Json and XFDF formats

Parameter	Type	Description
annotationDataFormat	`AnnotationDataFormat`	Gets the annotation data format

Returns Promise

exportAnnotationsAsObject

Perform export annotations action in the PDF Viewer

Parameter	Type	Description
annotationDataFormat (optional)	`AnnotationDataFormat`	Export the annotation based on the format.

Returns Promise

exportFormFields

Exports the form field data in the specified data format.

Parameter	Type	Description
data (optional)	`string`	The path for exporting the fields.
formFieldDataFormat (optional)	`FormFieldDataFormat`	Form field data format

Returns void

exportFormFieldsAsObject

Returns an object which represents the form field data in the specified data format.

Parameter	Type	Description
formFieldDataFormat (optional)	`FormFieldDataFormat`	Form field data format

Returns Promise

focusFormField

Focus a form field in a document by its field name or the field object.

Parameter	Type	Description
field	`any`	It describes about the field value

Returns void

getPageInfo

Retrieves the information of a specified page in the viewer.

Parameter	Type	Description
pageIndex	`number`	The page index to get the details. The first page is 0.

Returns PageInfoModel

getPageNumberFromClientPoint

Get page number from the user coordinates x and y.

Parameter	Type	Description
clientPoint	`Point`	The user will provide a x, y coordinates.

Returns number

importAnnotation

Perform imports annotations action in the PDF Viewer

Parameter	Type	Description
importData	`any`	Specifies the data for annotation imports
annotationDataFormat (optional)	`AnnotationDataFormat`	Specifies the annotation data format

Returns void

importFormFields

Imports the form fields data into the current PDF document.

Parameter	Type	Description
data (optional)	`string`	The path for importing the fields.
formFieldDataFormat (optional)	`FormFieldDataFormat`	Gets the form field data format

Returns void

load

Loads the given PDF document in the PDF viewer control

Parameter	Type	Description
document	`string` \| `Uint8Array`	Specifies the document name for load
password	`string`	Specifies the Given document password

Returns void

redo

Perform redo action for the edited annotations

Returns void

resetFormFields

reset all form fields data

Returns void

retrieveFormFields

To retrieve the form fields in the PDF Document.

Returns FormFieldModel[]

saveAsBlob

Saves the PDF document being loaded in the PDF Viewer control as blob.

Returns Promise

setJsonData

To modify the Json Data in ajax request.

Returns void

showNotificationPopup

Specifies the message to be displayed in the popup.

Parameter	Type	Description
errorString	`string`	It describes about the error string value

Returns void

undo

Perform undo action for the edited annotations

Returns void

unload

Unloads the PDF document being displayed in the PDF viewer.

Returns void

updateFormFields

To update the form fields within a PDF document, but only when the FormDesigner module is either not injected or has been disabled.

Parameter	Type	Description
formFields	`any`	It describes about the form field

Returns void

updateFormFieldsValue

Update the form field values from externally.

Parameter	Type	Description
fieldValue	`any`	It describes about the field value

Returns void

updateViewerContainer

updates the PDF Viewer container width and height from externally.

Returns void

zoomToRect

Brings the given rectangular region to view and zooms in the document to fit the region in client area (view port).

Parameter	Type	Description
rectangle	`Rect`	Specifies the region in client coordinates that is to be brought to view.

Returns void

Events

addSignature
`EmitType<AddSignatureEventArgs>`

Triggers when a signature is added to a page of a PDF document.

ajaxRequestFailed
`EmitType<AjaxRequestFailureEventArgs>`

Triggers when the AJAX request is failed.

ajaxRequestInitiate
`EmitType<AjaxRequestInitiateEventArgs>`

Triggers before the data is sent to the server.

ajaxRequestSuccess
`EmitType<AjaxRequestSuccessEventArgs>`

Triggers on successful AJAX request.

annotationAdd
`EmitType<AnnotationAddEventArgs>`

Triggers when an annotation is added to a PDF document’s page.

annotationDoubleClick
`EmitType<AnnotationDoubleClickEventArgs>`

Triggers when the annotation is double clicked.

annotationMouseLeave
`EmitType<AnnotationMouseLeaveEventArgs>`

Triggers when the user mouse moves away from the annotation object.

annotationMouseover
`EmitType<AnnotationMouseoverEventArgs>`

Triggers when the mouse is moved over the annotation object.

annotationMove
`EmitType<AnnotationMoveEventArgs>`

Triggers when an annotation is moved over the page of the PDF document.

annotationMoving
`EmitType<AnnotationMovingEventArgs>`

Triggers while moving an annotation.

annotationPropertiesChange
`EmitType<AnnotationPropertiesChangeEventArgs>`

Triggers when the annotation’s property is modified on a PDF document page.

annotationRemove
`EmitType<AnnotationRemoveEventArgs>`

Triggers when an annotation is removed from a PDF document’s page.

annotationResize
`EmitType<AnnotationResizeEventArgs>`

Triggers when an annotation is resized over the page of a PDF document.

annotationSelect
`EmitType<AnnotationSelectEventArgs>`

Triggers when an annotation is selected over the page of the PDF document.

annotationUnSelect
`EmitType<AnnotationUnSelectEventArgs>`

Triggers when an annotation is unselected over the page of the PDF document.

beforeAddFreeText
`EmitType<BeforeAddFreeTextEventArgs>`

Triggers before adding a text in the freeText annotation.

bookmarkClick
`EmitType<BookmarkClickEventArgs>`

Triggers when the bookmark is clicked in the PDF Viewer’s bookmark panel.

buttonFieldClick
`EmitType<ButtonFieldClickEventArgs>`

Triggers when the button is clicked.

commentAdd
`EmitType<CommentEventArgs>`

Triggers when a comment for the annotation is added to the comment panel.

commentDelete
`EmitType<CommentEventArgs>`

Triggers when the comment for the annotation in the comment panel is deleted.

commentEdit
`EmitType<CommentEventArgs>`

Triggers when the comment for the annotation in the comment panel is edited.

commentSelect
`EmitType<CommentEventArgs>`

Triggers when the comment for the annotation in the comment panel is selected.

commentStatusChanged
`EmitType<CommentEventArgs>`

Triggers when the annotation’s comment for status is changed in the comment panel.

created
`EmitType<void>`

Triggers during the creation of the PDF viewer component.

customContextMenuBeforeOpen
`EmitType<CustomContextMenuBeforeOpenEventArgs>`

Fires before the custom context menu option is opened.

customContextMenuSelect
`EmitType<CustomContextMenuSelectEventArgs>`

Fires when a custom context menu option is selected.

documentLoad
`EmitType<LoadEventArgs>`

Triggers while loading document into PDF viewer.

documentLoadFailed
`EmitType<LoadFailedEventArgs>`

Triggers while document loading failed in PdfViewer.

documentUnload
`EmitType<UnloadEventArgs>`

Triggers while closing the document.

downloadEnd
`EmitType<DownloadEndEventArgs>`

Triggers when the download actions are completed.

downloadStart
`EmitType<DownloadStartEventArgs>`

Triggers when the download action is initiated.

exportFailed
`EmitType<ExportFailureEventArgs>`

Triggers when the annotations export in a PDF document fails.

exportStart
`EmitType<ExportStartEventArgs>`

Triggers when an exported annotation started in the PDF Viewer.

exportSuccess
`EmitType<ExportSuccessEventArgs>`

Triggers when the annotations in a PDF document are successfully exported.

extractTextCompleted
`EmitType<ExtractTextCompletedEventArgs>`

Triggers when an text extraction is completed in the PDF Viewer.

formFieldAdd
`EmitType<FormFieldAddArgs>`

Triggers when a form field is added.

formFieldClick
`EmitType<FormFieldClickArgs>`

Triggers when the form field is selected.

formFieldDoubleClick
`EmitType<FormFieldDoubleClickArgs>`

Triggers when the form field is double-clicked.

formFieldFocusOut
`EmitType<FormFieldFocusOutEventArgs>`

Triggers when focus out from the form fields.

formFieldMouseLeave
`EmitType<FormFieldMouseLeaveArgs>`

Triggers when the mouse cursor leaves the form field.

formFieldMouseover
`EmitType<FormFieldMouseoverArgs>`

Triggers when the mouse cursor is over a form field.

formFieldMove
`EmitType<FormFieldMoveArgs>`

Triggers when a form field is moved.

formFieldPropertiesChange
`EmitType<FormFieldPropertiesChangeArgs>`

Triggers when a property of form field is changed.

formFieldRemove
`EmitType<FormFieldRemoveArgs>`

Triggers when a form field is removed.

formFieldResize
`EmitType<FormFieldResizeArgs>`

Triggers when a form field is resized.

formFieldSelect
`EmitType<FormFieldSelectArgs>`

Triggers when a form field is selected.

formFieldUnselect
`EmitType<FormFieldUnselectArgs>`

Triggers when a form field is unselected.

hyperlinkClick
`EmitType<HyperlinkClickEventArgs>`

Triggers when a hyperlink in a PDF document is clicked.

hyperlinkMouseOver
`EmitType<HyperlinkMouseOverArgs>`

Triggers when hyperlink in a PDF document is hovered.

importFailed
`EmitType<ImportFailureEventArgs>`

Triggers when the annotations imports in a PDF document fails.

importStart
`EmitType<ImportStartEventArgs>`

Triggers when an imported annotation started to appear in the PDF document.

importSuccess
`EmitType<ImportSuccessEventArgs>`

Triggers when the annotations in a PDF document are successfully imported.

keyboardCustomCommands
`EmitType<KeyboardCustomCommandsEventArgs>`

Triggers when the customized keyboard command keys are pressed.

moveSignature
`EmitType<MoveSignatureEventArgs>`

Triggers when a signature is moved across the page of a PDF document.

pageChange
`EmitType<PageChangeEventArgs>`

Triggers when there is change in current page number.

pageClick
`EmitType<PageClickEventArgs>`

Triggers when the mouse click is performed over the page of the PDF document.

pageMouseover
`EmitType<PageMouseoverEventArgs>`

Triggers when moving the mouse over the page.

pageOrganizerSaveAs
`EmitType<PageOrganizerSaveAsEventArgs>`

Triggers when the page organizer save as triggered.

pageRenderComplete
`EmitType<PageRenderCompleteEventArgs>`

Triggers upon completion of page rendering.

pageRenderInitiate
`EmitType<PageRenderInitiateEventArgs>`

Triggers upon the initiation of page rendering.

printEnd
`EmitType<PrintEndEventArgs>`

Triggers when the print actions are completed.

printStart
`EmitType<PrintStartEventArgs>`

Triggers when the print action is initiated.

removeSignature
`EmitType<RemoveSignatureEventArgs>`

Triggers when the signature is removed from the page of a PDF document.

resizeSignature
`EmitType<ResizeSignatureEventArgs>`

Triggers when the signature is resized and placed on a page of a PDF document.

signaturePropertiesChange
`EmitType<SignaturePropertiesChangeEventArgs>`

Triggers when the property of the signature is changed in the page of the PDF document.

signatureSelect
`EmitType<SignatureSelectEventArgs>`

Triggers when signature is selected over the page of the PDF document.

signatureUnselect
`EmitType<SignatureUnselectEventArgs>`

Triggers when signature is unselected over the page of the PDF document.

textSearchComplete
`EmitType<TextSearchCompleteEventArgs>`

Triggers when the text search is completed.

textSearchHighlight
`EmitType<TextSearchHighlightEventArgs>`

Triggers when the text search text is highlighted.

textSearchStart
`EmitType<TextSearchStartEventArgs>`

Triggers when the text search is initiated.

textSelectionEnd
`EmitType<TextSelectionEndEventArgs>`

Triggers when the text selection is complete.

textSelectionStart
`EmitType<TextSelectionStartEventArgs>`

Triggers when the text selection is initiated.

thumbnailClick
`EmitType<ThumbnailClickEventArgs>`

Triggers when the thumbnail in the PDF Viewer’s thumbnail panel is clicked.

toolbarClick
`EmitType<ClickEventArgs>`

Triggers when custom toolbar item is clicked.

validateFormFields
`EmitType<ValidateFormFieldsArgs>`

Triggers when validation is failed.

zoomChange
`EmitType<ZoomChangeEventArgs>`

Triggers When the magnification value changes.

Contents

Properties
DropdownFieldSettings
accessibilityTags
ajaxRequestSettings
annotation
annotationCollection
annotationSelectorSettings
annotationSettings
areaSettings
arrowSettings
bookmark
checkBoxFieldSettings
circleSettings
commandManager
contextMenuOption
contextMenuSettings
currentPageNumber
customFonts
customStamp
customStampSettings
dateTimeFormat
designerMode
disableContextMenuItems
distanceSettings
documentPath
downloadFileName
enableAccessibilityTags
enableAnnotation
enableAnnotationToolbar
enableAutoComplete
enableBookmark
enableBookmarkStyles
enableCommentPanel
enableDesktopMode
enableDownload
enableFormDesigner
enableFormDesignerToolbar
enableFormFields
enableFormFieldsValidation
enableFreeText
enableHandwrittenSignature
enableHyperlink
enableImportAnnotationMeasurement
enableInkAnnotation
enableLocalStorage
enableMagnification
enableMeasureAnnotation
enableMultiLineOverlap
enableMultiPageAnnotation
enableNavigation
enableNavigationToolbar
enablePageOrganizer
enablePersistence
enablePinchZoom
enablePrint
enablePrintRotation
enableRtl
enableShapeAnnotation
enableShapeLabel
enableStampAnnotations
enableStickyNotesAnnotation
enableTextMarkupAnnotation
enableTextMarkupResizer
enableTextSearch
enableTextSelection
enableThumbnail
enableToolbar
enableZoomOptimization
exportAnnotationFileName
fileName
formDesigner
formFieldCollections
freeTextSettings
handWrittenSignatureSettings
height
hideSaveSignature
highlightSettings
hyperlinkOpenState
initialDialogSettings
initialFieldSettings
initialRenderPages
inkAnnotationSettings
interactionMode
isAnnotationToolbarOpen
isAnnotationToolbarVisible
isBookmarkPanelOpen
isCommandPanelOpen
isDocumentEdited
isExtractText
isFormDesignerToolbarVisible
isFormFieldDocument
isMaintainSelection
isPageOrganizerOpen
isSignatureEditable
isThumbnailViewOpen
isValidFreeText
lineSettings
listBoxFieldSettings
locale
magnification
maxZoom
measurementSettings
minZoom
navigation
pageCount
pageOrganizer
pageOrganizerSettings
passwordFieldSettings
perimeterSettings
polygonSettings
print
printMode
printScaleFactor
radioButtonFieldSettings
radiusSettings
rectangleSettings
resourceUrl
restrictZoomRequest
retryCount
retryStatusCodes
retryTimeout
scrollSettings
selectedItems
serverActionSettings
serviceUrl
shapeLabelSettings
showDigitalSignatureAppearance
showNotificationDialog
signatureCollection
signatureDialogSettings
signatureFieldSettings
signatureFitMode
stampSettings
stickyNotesSettings
strikethroughSettings
textFieldSettings
textSearch
textSearchColorSettings
textSelection
thumbnailView
tileRenderingSettings
toolbar
toolbarSettings
underlineSettings
volumeSettings
width
zoomMode
zoomPercentage
zoomValue
Methods
addAnnotation
addCustomMenu
clearFormFields
convertClientPointToPagePoint
convertPagePointToClientPoint
convertPagePointToScrollingPoint
deleteAnnotations
destroy
download
exportAnnotation
exportAnnotationsAsBase64String
exportAnnotationsAsObject
exportFormFields
exportFormFieldsAsObject
focusFormField
getPageInfo
getPageNumberFromClientPoint
importAnnotation
importFormFields
load
redo
resetFormFields
retrieveFormFields
saveAsBlob
setJsonData
showNotificationPopup
undo
unload
updateFormFields
updateFormFieldsValue
updateViewerContainer
zoomToRect
Events
addSignature
ajaxRequestFailed
ajaxRequestInitiate
ajaxRequestSuccess
annotationAdd
annotationDoubleClick
annotationMouseLeave
annotationMouseover
annotationMove
annotationMoving
annotationPropertiesChange
annotationRemove
annotationResize
annotationSelect
annotationUnSelect
beforeAddFreeText
bookmarkClick
buttonFieldClick
commentAdd
commentDelete
commentEdit
commentSelect
commentStatusChanged
created
customContextMenuBeforeOpen
customContextMenuSelect
documentLoad
documentLoadFailed
documentUnload
downloadEnd
downloadStart
exportFailed
exportStart
exportSuccess
extractTextCompleted
formFieldAdd
formFieldClick
formFieldDoubleClick
formFieldFocusOut
formFieldMouseLeave
formFieldMouseover
formFieldMove
formFieldPropertiesChange
formFieldRemove
formFieldResize
formFieldSelect
formFieldUnselect
hyperlinkClick
hyperlinkMouseOver
importFailed
importStart
importSuccess
keyboardCustomCommands
moveSignature
pageChange
pageClick
pageMouseover
pageOrganizerSaveAs
pageRenderComplete
pageRenderInitiate
printEnd
printStart
removeSignature
resizeSignature
signaturePropertiesChange
signatureSelect
signatureUnselect
textSearchComplete
textSearchHighlight
textSearchStart
textSelectionEnd
textSelectionStart
thumbnailClick
toolbarClick
validateFormFields
zoomChange

Contents

Properties
DropdownFieldSettings
accessibilityTags
ajaxRequestSettings
annotation
annotationCollection
annotationSelectorSettings
annotationSettings
areaSettings
arrowSettings
bookmark
checkBoxFieldSettings
circleSettings
commandManager
contextMenuOption
contextMenuSettings
currentPageNumber
customFonts
customStamp
customStampSettings
dateTimeFormat
designerMode
disableContextMenuItems
distanceSettings
documentPath
downloadFileName
enableAccessibilityTags
enableAnnotation
enableAnnotationToolbar
enableAutoComplete
enableBookmark
enableBookmarkStyles
enableCommentPanel
enableDesktopMode
enableDownload
enableFormDesigner
enableFormDesignerToolbar
enableFormFields
enableFormFieldsValidation
enableFreeText
enableHandwrittenSignature
enableHyperlink
enableImportAnnotationMeasurement
enableInkAnnotation
enableLocalStorage
enableMagnification
enableMeasureAnnotation
enableMultiLineOverlap
enableMultiPageAnnotation
enableNavigation
enableNavigationToolbar
enablePageOrganizer
enablePersistence
enablePinchZoom
enablePrint
enablePrintRotation
enableRtl
enableShapeAnnotation
enableShapeLabel
enableStampAnnotations
enableStickyNotesAnnotation
enableTextMarkupAnnotation
enableTextMarkupResizer
enableTextSearch
enableTextSelection
enableThumbnail
enableToolbar
enableZoomOptimization
exportAnnotationFileName
fileName
formDesigner
formFieldCollections
freeTextSettings
handWrittenSignatureSettings
height
hideSaveSignature
highlightSettings
hyperlinkOpenState
initialDialogSettings
initialFieldSettings
initialRenderPages
inkAnnotationSettings
interactionMode
isAnnotationToolbarOpen
isAnnotationToolbarVisible
isBookmarkPanelOpen
isCommandPanelOpen
isDocumentEdited
isExtractText
isFormDesignerToolbarVisible
isFormFieldDocument
isMaintainSelection
isPageOrganizerOpen
isSignatureEditable
isThumbnailViewOpen
isValidFreeText
lineSettings
listBoxFieldSettings
locale
magnification
maxZoom
measurementSettings
minZoom
navigation
pageCount
pageOrganizer
pageOrganizerSettings
passwordFieldSettings
perimeterSettings
polygonSettings
print
printMode
printScaleFactor
radioButtonFieldSettings
radiusSettings
rectangleSettings
resourceUrl
restrictZoomRequest
retryCount
retryStatusCodes
retryTimeout
scrollSettings
selectedItems
serverActionSettings
serviceUrl
shapeLabelSettings
showDigitalSignatureAppearance
showNotificationDialog
signatureCollection
signatureDialogSettings
signatureFieldSettings
signatureFitMode
stampSettings
stickyNotesSettings
strikethroughSettings
textFieldSettings
textSearch
textSearchColorSettings
textSelection
thumbnailView
tileRenderingSettings
toolbar
toolbarSettings
underlineSettings
volumeSettings
width
zoomMode
zoomPercentage
zoomValue
Methods
addAnnotation
addCustomMenu
clearFormFields
convertClientPointToPagePoint
convertPagePointToClientPoint
convertPagePointToScrollingPoint
deleteAnnotations
destroy
download
exportAnnotation
exportAnnotationsAsBase64String
exportAnnotationsAsObject
exportFormFields
exportFormFieldsAsObject
focusFormField
getPageInfo
getPageNumberFromClientPoint
importAnnotation
importFormFields
load
redo
resetFormFields
retrieveFormFields
saveAsBlob
setJsonData
showNotificationPopup
undo
unload
updateFormFields
updateFormFieldsValue
updateViewerContainer
zoomToRect
Events
addSignature
ajaxRequestFailed
ajaxRequestInitiate
ajaxRequestSuccess
annotationAdd
annotationDoubleClick
annotationMouseLeave
annotationMouseover
annotationMove
annotationMoving
annotationPropertiesChange
annotationRemove
annotationResize
annotationSelect
annotationUnSelect
beforeAddFreeText
bookmarkClick
buttonFieldClick
commentAdd
commentDelete
commentEdit
commentSelect
commentStatusChanged
created
customContextMenuBeforeOpen
customContextMenuSelect
documentLoad
documentLoadFailed
documentUnload
downloadEnd
downloadStart
exportFailed
exportStart
exportSuccess
extractTextCompleted
formFieldAdd
formFieldClick
formFieldDoubleClick
formFieldFocusOut
formFieldMouseLeave
formFieldMouseover
formFieldMove
formFieldPropertiesChange
formFieldRemove
formFieldResize
formFieldSelect
formFieldUnselect
hyperlinkClick
hyperlinkMouseOver
importFailed
importStart
importSuccess
keyboardCustomCommands
moveSignature
pageChange
pageClick
pageMouseover
pageOrganizerSaveAs
pageRenderComplete
pageRenderInitiate
printEnd
printStart
removeSignature
resizeSignature
signaturePropertiesChange
signatureSelect
signatureUnselect
textSearchComplete
textSearchHighlight
textSearchStart
textSelectionEnd
textSelectionStart
thumbnailClick
toolbarClick
validateFormFields
zoomChange

PdfViewerComponent

Properties

DropdownFieldSettings DropdownFieldSettingsModel

accessibilityTags AccessibilityTags

ajaxRequestSettings AjaxRequestSettingsModel

annotation Annotation

annotationCollection any[]

annotationSelectorSettings AnnotationSelectorSettingsModel

annotationSettings AnnotationSettingsModel

areaSettings AreaSettingsModel

arrowSettings ArrowSettingsModel

bookmark BookmarkView

checkBoxFieldSettings CheckBoxFieldSettingsModel

circleSettings CircleSettingsModel

commandManager CommandManagerModel

contextMenuOption ContextMenuAction

contextMenuSettings ContextMenuSettingsModel

currentPageNumber number

customFonts string[]

customStamp CustomStampModel[]

customStampSettings CustomStampSettingsModel

dateTimeFormat string

designerMode boolean

disableContextMenuItems ContextMenuItem[]

distanceSettings DistanceSettingsModel

documentPath string

downloadFileName string

enableAccessibilityTags boolean

enableAnnotation boolean

enableAnnotationToolbar boolean

enableAutoComplete boolean

enableBookmark boolean

enableBookmarkStyles boolean

enableCommentPanel boolean

enableDesktopMode boolean

enableDownload boolean

enableFormDesigner boolean

enableFormDesignerToolbar boolean

enableFormFields boolean

enableFormFieldsValidation boolean

enableFreeText boolean

enableHandwrittenSignature boolean

enableHyperlink boolean

enableImportAnnotationMeasurement boolean

enableInkAnnotation boolean

enableLocalStorage boolean

enableMagnification boolean

enableMeasureAnnotation boolean

enableMultiLineOverlap boolean

enableMultiPageAnnotation boolean

enableNavigation boolean

enableNavigationToolbar boolean

enablePageOrganizer boolean

enablePersistence boolean

enablePinchZoom boolean

enablePrint boolean

enablePrintRotation boolean

enableRtl boolean

enableShapeAnnotation boolean

enableShapeLabel boolean

enableStampAnnotations boolean

enableStickyNotesAnnotation boolean

enableTextMarkupAnnotation boolean

enableTextMarkupResizer boolean

enableTextSearch boolean

enableTextSelection boolean

enableThumbnail boolean

enableToolbar boolean

enableZoomOptimization boolean

exportAnnotationFileName string

fileName string

formDesigner FormDesigner

formFieldCollections FormFieldModel[]

freeTextSettings FreeTextSettingsModel

handWrittenSignatureSettings HandWrittenSignatureSettingsModel

height string | number

hideSaveSignature boolean

highlightSettings HighlightSettingsModel

hyperlinkOpenState LinkTarget

initialDialogSettings SignatureDialogSettingsModel

DropdownFieldSettings
`DropdownFieldSettingsModel`

accessibilityTags
`AccessibilityTags`

ajaxRequestSettings
`AjaxRequestSettingsModel`

annotation
`Annotation`

annotationCollection
`any[]`

annotationSelectorSettings
`AnnotationSelectorSettingsModel`

annotationSettings
`AnnotationSettingsModel`

areaSettings
`AreaSettingsModel`

arrowSettings
`ArrowSettingsModel`

bookmark
`BookmarkView`

checkBoxFieldSettings
`CheckBoxFieldSettingsModel`

circleSettings
`CircleSettingsModel`

commandManager
`CommandManagerModel`

contextMenuOption
`ContextMenuAction`

contextMenuSettings
`ContextMenuSettingsModel`

currentPageNumber
`number`

customFonts
`string[]`

customStamp
`CustomStampModel[]`

customStampSettings
`CustomStampSettingsModel`

dateTimeFormat
`string`

designerMode
`boolean`

disableContextMenuItems
`ContextMenuItem[]`

distanceSettings
`DistanceSettingsModel`

documentPath
`string`

downloadFileName
`string`

enableAccessibilityTags
`boolean`

enableAnnotation
`boolean`

enableAnnotationToolbar
`boolean`

enableAutoComplete
`boolean`

enableBookmark
`boolean`

enableBookmarkStyles
`boolean`

enableCommentPanel
`boolean`

enableDesktopMode
`boolean`

enableDownload
`boolean`

enableFormDesigner
`boolean`

enableFormDesignerToolbar
`boolean`

enableFormFields
`boolean`

enableFormFieldsValidation
`boolean`

enableFreeText
`boolean`

enableHandwrittenSignature
`boolean`

enableHyperlink
`boolean`

enableImportAnnotationMeasurement
`boolean`

enableInkAnnotation
`boolean`

enableLocalStorage
`boolean`

enableMagnification
`boolean`

enableMeasureAnnotation
`boolean`

enableMultiLineOverlap
`boolean`

enableMultiPageAnnotation
`boolean`

enableNavigation
`boolean`

enableNavigationToolbar
`boolean`

enablePageOrganizer
`boolean`

enablePersistence
`boolean`

enablePinchZoom
`boolean`

enablePrint
`boolean`

enablePrintRotation
`boolean`

enableRtl
`boolean`

enableShapeAnnotation
`boolean`

enableShapeLabel
`boolean`

enableStampAnnotations
`boolean`

enableStickyNotesAnnotation
`boolean`

enableTextMarkupAnnotation
`boolean`

enableTextMarkupResizer
`boolean`

enableTextSearch
`boolean`

enableTextSelection
`boolean`

enableThumbnail
`boolean`

enableToolbar
`boolean`

enableZoomOptimization
`boolean`

exportAnnotationFileName
`string`

fileName
`string`

formDesigner
`FormDesigner`

formFieldCollections
`FormFieldModel[]`

freeTextSettings
`FreeTextSettingsModel`

handWrittenSignatureSettings
`HandWrittenSignatureSettingsModel`

height
`string` | `number`

hideSaveSignature
`boolean`

highlightSettings
`HighlightSettingsModel`

hyperlinkOpenState
`LinkTarget`

initialDialogSettings
`SignatureDialogSettingsModel`

initialFieldSettings
`InitialFieldSettingsModel`

initialRenderPages
`number`