Customize the selection border

28 Sep 20231 minute to read

The PDF Viewer library allows you to customize the annotations selection borders using the annotationSelectorSettings Property.

The following steps are used to customize the selection border.

Step 1: Follow the steps provided in the link to create simple PDF Viewer sample in Angular.

Step 2: Add the following code snippet in app.component.html and app.component.ts files to customize selection borders.

Standalone

<ejs-pdfviewer id="pdfViewer"
               [documentPath]='document'
               [freeTextSettings]="annotationsettings"
               [rectangleSettings]="annotationsettings"
               [stampSettings]="annotationsettings"
               style="height:640px;display:block">
</ejs-pdfviewer>

Server-Backed

<ejs-pdfviewer id="pdfViewer"
               [serviceUrl]='service'
               [documentPath]='document'
               [freeTextSettings]="annotationsettings"
               [rectangleSettings]="annotationsettings"
               [stampSettings]="annotationsettings"
               style="height:640px;display:block">
</ejs-pdfviewer>

public annotationsettings: any = {
  annotationSelectorSettings: {
    selectionBorderColor: 'yellow',
    resizerShape: 'Circle',
    selectorLineDashArray: 9
  }
};

Find the Sample how to customize the selection border