How to Customize Annotation Selectors in Angular PDF Viewer
14 Aug 20262 minutes to read
Use the annotationSelectorSettings property to configure the appearance and behavior of annotation selectors. This includes the selection handles and the resizer (for example, the shape and size of the resizer handles), which determine how users interact with annotations during editing.
The example below changes the selector’s resizer handle shape to circular and opens an existing annotation for editing. Setting resizerShape = 'Circle' updates the selector appearance to circular resizer handles. Ensure an annotation exists before calling editAnnotation to avoid runtime errors.
Example: Customize the selector of a shape annotation
<button ejs-button cssClass="e-primary" (click)="onAnnotationSelector()">annotationSelector</button>import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {
PdfViewerComponent,
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
TextSearchService,
TextSelectionService,
PrintService,
AnnotationService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
PdfViewerModule,
} from '@syncfusion/ej2-angular-pdfviewer';
/**
* Default PdfViewer Controller
*/
@Component({
selector: 'app-root',
templateUrl: 'app.html',
encapsulation: ViewEncapsulation.None,
// tslint:disable-next-line:max-line-length
providers: [
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
TextSearchService,
TextSelectionService,
PrintService,
AnnotationService,
FormFieldsService,
FormDesignerService,
PageOrganizerService,
],
styleUrls: ['app.css'],
standalone: true,
imports: [PdfViewerModule],
})
export class AppComponent {
@ViewChild('pdfviewer')
public pdfviewerControl: PdfViewerComponent;
public document: string =
'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
public resource: string =
'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';
onAnnotationSelector(): void {
if (!this.pdfviewerControl) {
return;
}
this.pdfviewerControl.rectangleSettings.annotationSelectorSettings.resizerShape =
'Circle';
const annot = this.pdfviewerControl.annotationCollection[0];
if (annot) {
this.pdfviewerControl.annotationModule.editAnnotation(annot);
}
}
ngOnInit(): void {
// ngOnInit function
}
}