Angular
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
FREE TRIAL
Search results

PdfViewerModel API in Angular PDF Viewer API component

Interface for a class PdfViewer

Properties

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.

resourcesLoaded

EmitType<void>

Triggers after loading the Pdfium resources.

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.

Get or set the dropdown field settings.

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 {}
}

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 {}
}

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 {
	 }
}

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 {}
}

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 {}
  
}

customFonts

string[]

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

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

enableBookmarkStyles

boolean

Enables or disables the bookmark styles in the PDF viewer

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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.

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

enablePersistence

boolean

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

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 {}
}

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 {}
}

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 {}
}

enableRtl

boolean

Enable or disable rendering component in right to left direction.

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

extractTextOption

ExtractTextOption

Enables different levels of extract text for the Standalone PDF Viewer. The choice of extractTextCompleted determines the content of the textData. Options:

  • ExtractTextOption.TextAndBounds: Indicates that both plain text and text with bounds (layout information) are returned. This is the default behavior, providing both the extracted text and its positional data. Use this option when you need both the textual content and its layout information for further processing or analysis.
  • ExtractTextOption.TextOnly: Indicates that only plain text is extracted and returned. This option does not include any additional bounds information.
  • ExtractTextOption.BoundsOnly: Indicates that text is returned along with layout information, such as bounds or coordinates. This option does not include plain text and is useful when only positional data is required.
  • ExtractTextOption.None: Indicates that no text information is returned. This option is not applicable for the ExtractText method and is only used in the extractTextCompleted event when no text data is available.

This property is used to determine how textData should be managed during the extractTextCompleted event.

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.

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

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 {}
}

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 {}
}

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 {}
}

isAnnotationToolbarOpen

boolean

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

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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
    );
  }
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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);
  }
}

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’.

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 {}
}

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 {}
}

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);
  }
}

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 {}
}

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 {}
}

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 %}

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 {}
}

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 {}
}

retryCount

number

Specifies the retry count for the failed requests.

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.

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 {}
}

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

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 {}
}

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 {}
}

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 {}
}

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.

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 {}
}

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 {}
}

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 {}
}

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 {}
}

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 {}
}
Previous
Next
Contents
Contents