How to enable and disable the delete button based on annotation selection and unselection events

11 Feb 20262 minutes to read

This article demonstrates how to enable and disable a toolbar delete button in response to annotation selection and unselection events using annotationSelect and annotationUnSelect.

Ensure the viewer’s annotation module is available before invoking this.pdfviewerControl.annotation.deleteAnnotation().
Example:

<ejs-pdfviewer #pdfviewer id='pdfViewer'
    [documentPath]='document'
    [enableToolbar]=false
    [enableNavigationToolbar]=false
    (annotationSelect)="annotationSelect($event)"
    (annotationUnSelect)="annotationUnSelect($event)"
    style="height:640px; display: block">
</ejs-pdfviewer>
<ejs-pdfviewer #pdfviewer id='pdfViewer'
    [serviceUrl]='service'
    [documentPath]='document'
    [enableToolbar]=false
    [enableNavigationToolbar]=false
    (annotationSelect)="annotationSelect($event)"
    (annotationUnSelect)="annotationUnSelect($event)"
    style="height:640px; display: block">
</ejs-pdfviewer>
<ejs-toolbar id='topToolbar' #customToolbar>
    <e-item
        prefixIcon="e-delete-1"
        tooltipText="Delete annotation"
        id ="DeleteButton"
        disabled="true"
        (click)="deleteSelectedAnnotation()">
    </e-items>
</ejs-toolbar>
public annotationSelect(e: any): void {
    this.customToolbar.items[1].disabled = false;
}

public annotationUnSelect(e: any): void {
    this.customToolbar.items[1].disabled = true;
}

public deleteSelectedAnnotation(): void {
    this.pdfviewerControl.annotation.deleteAnnotation();
    this.customToolbar.items[1].disabled = true;
}

Find the sample how to enable and disable the delete button while selecting and unselecting annotations.