Customize annotation selectors in Angular PDF Viewer
Customize the annotation selector using the annotationSelectorSettings property of the PDF Viewer.
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.component.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.component.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
}
}