Syncfusion AI Assistant

How can I help you?

PDF Viewer annotation events in Angular

13 Feb 202624 minutes to read

The PDF Viewer control supports several annotation events that enable applications to respond to user interactions—adding, moving, resizing, selecting, and removing annotations. Examples in this article reference the resource URL shown in the code samples.

The annotation events supported by the PDF Viewer control are:

Annotation events	Description
annotationAdd	Triggers when an annotation is added.
annotationDoubleClick	Triggers when an annotation is double-clicked.
annotationMouseLeave	Triggers when the mouse cursor leaves an annotation.
annotationMouseover	Triggers when the mouse cursor moves over an annotation.
annotationMove	Triggers when an annotation is moved.
annotationMoving	Triggers while an annotation is being moved.
annotationPropertiesChange	Triggers when an annotation’s properties are changed.
annotationRemove	Triggers when an annotation is removed.
annotationResize	Triggers when an annotation is resized.
annotationSelect	Triggers when an annotation is selected.
annotationUnselect	Triggers when an annotation is unselected.
beforeAddFreeText	Triggers before adding free text.
addSignature	Triggers when a signature is added.
removeSignature	Triggers when a signature is removed.
resizeSignature	Triggers when a signature is resized.
signaturePropertiesChange	Triggers when signature properties change.
signatureSelect	Triggers when a signature is selected.
signatureUnselect	Triggers when a signature is unselected.

annotationAdd

The annotationAdd event triggers when an annotation is added to the PDF Viewer.

Event Arguments

For event data, see AnnotationAddEventArgs. It provides properties such as annotationId, pageNumber, annotationType, and bounds.

The following example illustrates how to handle the annotationAdd event.

  <div class="content-wrapper">
    <ejs-pdfviewer
      #pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      (annotationAdd)="annotationAdd($event)"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>

app.ts
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';


@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  encapsulation: ViewEncapsulation.None,
  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/31.2.2/dist/ej2-pdfviewer-lib';

  annotationAdd(args: any): void {
    console.log('Annotation added with ID: ' + args.annotationId);
    console.log('Annotation type: ' + args.annotationType);
  }

  ngOnInit(): void {
    // ngOnInit function
  }
}

annotationDoubleClick

The annotationDoubleClick event triggers when an annotation is double-clicked.

Event Arguments

For event data, see AnnotationDoubleClickEventArgs.

The following example illustrates how to handle the annotationDoubleClick event.

  <div class="content-wrapper">
    <ejs-pdfviewer
      #pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      (annotationDoubleClick)="annotationDoubleClick($event)"
      style="height:640px;display:block"
    ></ejs-pdfviewer>
  </div>

app.ts
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';


@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  encapsulation: ViewEncapsulation.None,
  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/31.2.2/dist/ej2-pdfviewer-lib';

  annotationDoubleClick(args: any): void {
    console.log('Annotation double-clicked on page: ' + args.pageIndex);
  }

  ngOnInit(): void {
    // ngOnInit function
  }
}

annotationMouseLeave

The annotationMouseLeave event triggers when the mouse cursor leaves an annotation.

Event Arguments

For event data, see AnnotationMouseLeaveEventArgs.

The following example illustrates how to handle the annotationMouseLeave event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="documentPath"
    [resourceUrl]="resourceUrl"
    (annotationMouseLeave)="annotationMouseLeave($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
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';

@Component({
  selector: 'app-root',
  templateUrl: 'app.html',
  encapsulation: ViewEncapsulation.None,

  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/31.2.2/dist/ej2-pdfviewer-lib';

  annotationMouseLeave(args: any): void {
    console.log(
      'Annotation mouse leave event is triggered for annotation on page: ' +
        args.pageIndex
    );
  }
  ngOnInit(): void {
    // ngOnInit function
  }
}

annotationMouseover

The annotationMouseover event triggers when the mouse cursor moves over an annotation.

Event Arguments

For event data, see AnnotationMouseOverEventArgs.

The following example illustrates how to handle the annotationMouseover event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationMouseover)="onAnnotationMouseOver($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationMouseOver(args: any): void {
    console.log('Annotation mouse over triggered for annotation ID:', args.annotationId);
  }
}

annotationMove

The annotationMove event triggers when an annotation is moved.

Event Arguments

For event data, see AnnotationMoveEventArgs.

The following example illustrates how to handle the annotationMove event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationMove)="onAnnotationMove($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationMove(args: any): void {
    console.log('Annotation moved. ID:', args.annotationId, 'Page:', args.pageIndex);
  }
}

annotationMoving

The annotationMoving event triggers while an annotation is being moved.

Event Arguments

For event data, see AnnotationMovingEventArgs.

The following example illustrates how to handle the annotationMoving event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationMoving)="onAnnotationMoving($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationMoving(args: any): void {
    console.log('Annotation is being moved. Current Position:', args.currentPosition);
  }
}

annotationPropertiesChange

The annotationPropertiesChange event triggers when an annotation’s properties are changed.

Event Arguments

For event data, see AnnotationPropertiesChangeEventArgs. It provides properties such as annotationId, pageNumber, and action.

The following example illustrates how to handle the annotationPropertiesChange event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationPropertiesChange)="onAnnotationPropertiesChange($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationPropertiesChange(args: any): void {
    console.log('Annotation properties changed for ID:', args.annotationId);
    console.log('isThicknessChanged:', args.isThicknessChanged);
    // You can also log other properties like isColorChanged, isOpacityChanged, etc.
  }
}

annotationRemove

The annotationRemove event triggers when an annotation is removed.

Event Arguments

For event data, see AnnotationRemoveEventArgs. It provides properties such as annotationId and pageNumber.

The following example illustrates how to handle the annotationRemove event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationRemove)="onAnnotationRemove($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationRemove(args: any): void {
    console.log('Annotation removed with ID:', args.annotationId);
  }
}

annotationResize

The annotationResize event triggers when an annotation is resized.

Event Arguments

For event data, see AnnotationResizeEventArgs.

The following example illustrates how to handle the annotationResize event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationResize)="onAnnotationResize($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationResize(args: any): void {
    console.log('Annotation resized. ID:', args.annotationId);
  }
}

annotationSelect

The annotationSelect event triggers when an annotation is selected.

Event Arguments

For event data, see AnnotationSelectEventArgs.

The following example illustrates how to handle the annotationSelect event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationSelect)="onAnnotationSelect($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationSelect(args: any): void {
    console.log('Annotation selected with ID:', args.annotationId);
  }
}

annotationUnselect

The annotationUnselect event triggers when an annotation is unselected.

Event Arguments

For event data, see AnnotationUnSelectEventArgs.

The following example illustrates how to handle the annotationUnselect event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (annotationUnSelect)="onAnnotationUnselect($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAnnotationUnselect(args: any): void {
    console.log('Annotation unselected with ID:', args.annotationId);
  }
}

beforeAddFreeText

The beforeAddFreeText event triggers before adding free text to the PDF Viewer.

Event Arguments

For event data, see BeforeAddFreeTextEventArgs.

The following example illustrates how to handle the beforeAddFreeText event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (beforeAddFreeText)="onBeforeAddFreeText($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onBeforeAddFreeText(args: any): void {
    console.log('Before adding free text on page:', args.pageIndex);

    // Optional: Cancel the addition of the free text annotation
    // args.cancel = true;
  }
}

addSignature

The addSignature event triggers when a signature is added to the PDF Viewer.

Event Arguments

For event data, see AddSignatureEventArgs. It provides properties such as pageNumber.

The following example illustrates how to handle the addSignature event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (addSignature)="onAddSignature($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onAddSignature(args: any): void {
    console.log('Signature added to page:', args.pageIndex);
  }
}

removeSignature

The removeSignature event triggers when a signature is removed from the PDF Viewer.

Event Arguments

For event data, see RemoveSignatureEventArgs. It provides properties such as pageNumber.

The following example illustrates how to handle the removeSignature event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (removeSignature)="onRemoveSignature($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onRemoveSignature(args: any): void {
    console.log('Signature removed from page:', args.pageIndex);
  }
}

resizeSignature

The resizeSignature event triggers when a signature is resized in the PDF Viewer.

Event Arguments

For event data, see ResizeSignatureEventArgs.

The following example illustrates how to handle the resizeSignature event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (resizeSignature)="onResizeSignature($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onResizeSignature(args: any): void {
    console.log('Signature resized on page:', args.pageIndex);
  }
}

signaturePropertiesChange

The signaturePropertiesChange event triggers when signature properties are changed in the PDF Viewer.

Event Arguments

For event data, see SignaturePropertiesChangeEventArgs.

The following example illustrates how to handle the signaturePropertiesChange event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (signaturePropertiesChange)="onSignaturePropertiesChange($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onSignaturePropertiesChange(args: any): void {
    console.log('Signature properties changed on page:', args.pageIndex);
  }
}

signatureSelect

The signatureSelect event triggers when a signature is selected in the PDF Viewer.

Event Arguments

For event data, see SignatureSelectEventArgs.

The following example illustrates how to handle the signatureSelect event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (signatureSelect)="onSignatureSelect($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onSignatureSelect(args: any): void {
    console.log('Signature selected on page:', args.pageIndex);
  }
}

signatureUnselect

The signatureUnselect event triggers when a signature is unselected in the PDF Viewer.

Event Arguments

For event data, see SignatureUnSelectEventArgs.

The following example illustrates how to handle the signatureUnselect event.

<div class="content-wrapper">
  <ejs-pdfviewer
    #pdfViewer
    id="pdfViewer"
    [documentPath]="document"
    [resourceUrl]="resource"
    (signatureUnselect)="onSignatureUnselect($event)"
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>

app.ts
import { Component, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
import {
  PdfViewerComponent,
  PdfViewerModule,
  ToolbarService,
  MagnificationService,
  NavigationService,
  LinkAnnotationService,
  ThumbnailViewService,
  BookmarkViewService,
  TextSelectionService,
  AnnotationService,
  FormDesignerService,
  FormFieldsService,
  PageOrganizerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.css'],
  providers: [
    ToolbarService,
    MagnificationService,
    NavigationService,
    LinkAnnotationService,
    ThumbnailViewService,
    BookmarkViewService,
    TextSelectionService,
    AnnotationService,
    FormDesignerService,
    FormFieldsService,
    PageOrganizerService
  ],
  standalone: true,
  imports: [PdfViewerModule]
})
export class AppComponent implements OnInit {
  @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/31.2.2/dist/ej2-pdfviewer-lib';

  ngOnInit(): void {
    // Initialization logic if needed
  }

  onSignatureUnselect(args: any): void {
    console.log('Signature unselected on page:', args.pageIndex);
  }
}

How can I help you?

PDF Viewer annotation events in Angular

annotationAdd

Event Arguments

annotationDoubleClick

Event Arguments

annotationMouseLeave

Event Arguments

annotationMouseover

Event Arguments

annotationMove

Event Arguments

annotationMoving

Event Arguments

annotationPropertiesChange

Event Arguments

annotationRemove

Event Arguments

annotationResize

Event Arguments

annotationSelect

Event Arguments

annotationUnselect

Event Arguments

beforeAddFreeText

Event Arguments

Signature-related events

addSignature

Event Arguments

removeSignature

Event Arguments

resizeSignature

Event Arguments

signaturePropertiesChange

Event Arguments

signatureSelect

Event Arguments

signatureUnselect

Event Arguments