Customize annotation selectors in Angular PDF Viewer
13 Feb 20262 minutes to read
Use the annotationSelectorSettings property to configure the appearance and behavior of annotation selectors. This includes selection handles and resizer (for example, handle shape and size), 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
}
}