Syncfusion AI Assistant

How can I help you?

Create and modify annotations in Angular PDF Viewer

6 Apr 20266 minutes to read

The PDF Viewer annotation tools add, edit, and manage markups across documents. This page provides an overview with quick navigation to each annotation type and common creation and modification workflows.

Quick navigation to annotation types

Jump directly to a specific annotation type for detailed usage and examples:

TextMarkup annotations:

Shape annotations:

Measurement annotations:

Other annotations:

NOTE

Each annotation type page includes both UI steps and programmatic examples specific to that type.

Create annotations

Create via UI

  • Open the annotation toolbar in the PDF Viewer.
  • Choose the required tool (for example, Shape, Free text, Ink, Stamp, Redaction).
  • Click or drag on the page to place the annotation.

Annotation toolbar

Note:

  • When pan mode is active and a shape or stamp tool is selected, the viewer switches to text select mode automatically.
  • Property pickers in the annotation toolbar let users choose color, stroke color, thickness, and opacity while drawing

Create programmatically

Creation patterns vary by type. Refer to the individual annotation pages for tailored code.

Example: creating a Rectangle annotation using addAnnotation.

import { Component } from '@angular/core';
import { PdfViewerModule, ToolbarService, AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService],
  template: `
    <button (click)="addRectangleAnnotation()">Add Redaction Annotation</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height: 650px">
    </ejs-pdfviewer>
  `
})
export class AppComponent {
  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';

  private getViewer(): any {
    return (document.getElementById('pdfViewer') as any).ej2_instances[0];
  }

  addRedactionAnnotation(): void {
    const viewer = this.getViewer();
    viewer.annotation.addAnnotation('Redaction', {
      bound: { x: 200, y: 480, width: 150, height: 75 },
      pageNumber: 1,
      markerFillColor: '#0000FF',
      markerBorderColor: 'white',
      fillColor: 'red',
      overlayText: 'Confidential',
      fontColor: 'yellow',
      fontFamily: 'Times New Roman',
      fontSize: 8,
      beforeRedactionsApplied: false
    });
  }
}

Refer to the individual annotation pages for enabling draw modes from UI buttons and other type-specific creation samples.

Modify annotations

Modify via UI

Use the annotation toolbar after selecting an annotation:

  • Edit color: change the fill or text color (when applicable)

Edit color

  • Edit stroke color: change the border or line color (shape and line types)

Edit stroke color

  • Edit thickness: adjust the border or line thickness

Edit thickness

  • Edit opacity: change transparency

Edit opacity

Additional options such as Line Properties (for line/arrow) are available from the context menu (right-click > Properties) where supported.

Modify programmatically

Use editAnnotation to apply changes to an existing annotation. Common flow:

  • Locate the target annotation from annotationCollection.
  • Update the desired properties.
  • Call editAnnotation with the modified object.
import { Component } from '@angular/core';
import { PdfViewerModule, ToolbarService, AnnotationService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService],
  template: `
    <button (click)="bulkEditAnnotations()">Bulk Edit Annotations</button>
    <ejs-pdfviewer
      id="pdfViewer"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height: 650px">
    </ejs-pdfviewer>
  `
})
export class AppComponent {
  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';

  private getViewer(): any {
    return (document.getElementById('pdfViewer') as any).ej2_instances[0];
  }

  bulkEditAnnotations(): void {
    const viewer = this.getViewer();
    for (const ann of viewer.annotationCollection) {
      if (ann.author === 'Guest User' && ann.subject === 'Corrections') {
        ann.color = '#ff0000';
        ann.opacity = 0.8;
        viewer.annotation.editAnnotation(ann);
      }
    }
  }
}

NOTE

For type-specific edit examples (for example, editing line endings, moving stamps, or updating sticky note bounds), see the corresponding annotation type page linked above.

See also