How to Change the Selection Border in Angular PDF Viewer

14 Aug 20261 minute to read

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

Recommended steps

1. Create a basic PDF Viewer sample by following the getting-started guide.
2. Apply annotationSelectorSettings in the component to customize selector appearance (examples below show usage with freeTextSettings, rectangleSettings, and stampSettings).

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