Syncfusion AI Assistant

How can I help you?

Arrow Annotation (Shape) in Angular PDF Viewer

26 Mar 20269 minutes to read

Arrow annotations let users point, direct attention, or indicate flow on PDFs—useful for callouts, direction markers, and connectors during reviews. You can add arrows from the toolbar, switch to arrow mode programmatically, customize appearance, edit/delete them in the UI, and export them with the document.

Arrow overview

Enable Arrow Annotation in the Viewer

To enable Arrow annotations, inject the following modules into the Angular PDF Viewer:

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

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        style="height:650px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
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';
}

Add Arrow Annotation

Add Arrow Annotation Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Select Shapes → Arrow.
  3. Click and drag on the PDF page to draw the arrow.

Shape toolbar

NOTE

When in Pan mode, selecting a shape tool automatically switches the viewer to selection mode for smooth interaction.

Enable Arrow Mode

Switch the viewer into arrow mode using setAnnotationMode('Arrow').

enableArrowMode(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotationModule.setAnnotationMode('Arrow');
}

Exit Arrow Mode

exitArrowMode(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotationModule.setAnnotationMode('None');
}

Add Arrow Programmatically

Use the addAnnotation API to draw an arrow at a specific location (defined by two vertexPoints).

addArrow(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotation.addAnnotation('Arrow', {
    offset: { x: 200, y: 370 },
    pageNumber: 1,
    vertexPoints: [
      { x: 200, y: 370 },
      { x: 350, y: 370 }
    ]
  });
}

Customize Arrow Appearance

Configure default arrow appearance (fill color, stroke color, thickness, opacity) using the arrowSettings property.

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

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [documentPath]="document"
        [resourceUrl]="resource"
        [arrowSettings]="arrowSettings"
        style="height:650px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
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';

  // Arrow annotation default settings
  public arrowSettings = {
    fillColor: '#ffff00',
    strokeColor: '#0066ff',
    thickness: 2,
    opacity: 0.9
  };
}

NOTE

For Line and Arrow annotations, Fill Color is available only when an arrowhead style is applied at the Start or End. If both are None, lines do not render fill and the Fill option remains disabled.

Manage Arrow (Edit, Move, Resize, Delete)

Edit Arrow

Edit Arrow (UI)

  • Select a Arrow to view resize handles.
  • Drag endpoints to adjust length/angle.
  • Edit stroke color, opacity, and thickness using the annotation toolbar.

Shape tools

Use the annotation toolbar:

  • Edit Color tool
    Edit color

  • Edit Opacity slider
    Edit opacity

  • Line Properties
    Open the Line Properties dialog via Right Click → Properties.

Line properties dialog

Edit Arrow Programmatically

Modify an existing Arrow programmatically using editAnnotation().

editArrowProgrammatically(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  for (const annot of pdfViewer.annotationCollection) {
    if (annot.subject === 'Arrow') {
      annot.strokeColor = '#0000ff';
      annot.thickness = 2;
      annot.fillColor = '#ffff00';
      pdfViewer.annotation.editAnnotation(annot);
      break;
    }
  }
}

Delete Arrow

The PDF Viewer supports deleting existing annotations through the UI and API.
See Delete Annotation for full behavior and workflows.

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to arrow annotations. It provides a dedicated interface for collaboration and review within the PDF Viewer.

Set properties while adding Individual Annotation

Set properties for individual arrow annotations by passing values directly during addAnnotation.

addMultipleArrows(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];

  // Arrow 1
  pdfViewer.annotation.addAnnotation('Arrow', {
    offset: { x: 200, y: 230 },
    pageNumber: 1,
    vertexPoints: [
      { x: 200, y: 230 },
      { x: 350, y: 230 }
    ],
    fillColor: '#ffff00',
    strokeColor: '#0066ff',
    thickness: 2,
    opacity: 0.9,
    author: 'User 1'
  });

  // Arrow 2
  pdfViewer.annotation.addAnnotation('Arrow', {
    offset: { x: 220, y: 300 },
    pageNumber: 1,
    vertexPoints: [
      { x: 220, y: 300 },
      { x: 400, y: 300 }
    ],
    fillColor: '#ffef00',
    strokeColor: '#ff1010',
    thickness: 3,
    opacity: 0.9,
    author: 'User 2'
  });
}

Disable Arrow Annotation

Disable shape annotations (Line, Arrow, Rectangle, Circle, Polygon) using the enableShapeAnnotation property.

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

@Component({
  selector: 'app-root',
  template: `
    <div class="content-wrapper">
      <ejs-pdfviewer
        id="pdfViewer"
        [enableShapeAnnotation]="false"
        [documentPath]="document"
        [resourceUrl]="resource"
        style="height:650px;display:block">
      </ejs-pdfviewer>
    </div>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService]
})
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';
}

Handle Arrow Events

The PDF viewer provides annotation life-cycle events that notify when Arrow annotations are added, modified, selected, or removed.
For the full list of available events and their descriptions, see Annotation Events

Export and Import

The PDF Viewer supports exporting and importing annotations. For details on supported formats and workflows, see Export and Import annotations.

See Also