PDF Viewer Annotations events in Angular

The PDF Viewer control provides support for several annotation events. The annotation events supported by the PDF Viewer control are:

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

annotationAdd

The annotationAdd event is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  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/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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  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/31.2.2/dist/ej2-pdfviewer-lib';

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

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

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

annotationMouseLeave

The annotationMouseLeave event is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,

  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/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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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 is triggered 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.component.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.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./app.component.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);
  }
}

PDF Viewer Annotations 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