Syncfusion AI Assistant

How can I help you?

Add Free Text Annotations in Angular PDF Viewer

26 Mar 20269 minutes to read

Free Text annotations let users place editable text boxes on a PDF page to add comments, labels, or notes without changing the original document content.

Enable Free Text in the Viewer

To enable Free Text in 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 Free Text

Add Free Text Using the Toolbar

  1. Open the Annotation Toolbar.
  2. Click Free Text to enable Free Text mode.
  3. Click on the page to place the text box and start typing.

Free Text tool

NOTE

When Pan mode is active, choosing Free Text switches the viewer into the appropriate selection/edit workflow for a smoother experience.

Enable Free Text Mode

Programmatically switch to Free Text mode.

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

Exit Free Text Mode

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

Add Free Text Programmatically

Use the addAnnotation API to create a text box at a given location with desired styles.

addFreeTextProgrammatically(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  pdfViewer.annotation.addAnnotation('FreeText', {
    offset: { x: 100, y: 150 },
    pageNumber: 1,
    width: 220,
    height: 48,
    defaultText: 'Syncfusion',
    fontFamily: 'Helvetica',
    fontSize: 16,
    fontColor: '#ffffff',
    textAlignment: 'Center',
    borderStyle: 'solid',
    borderWidth: 2,
    borderColor: '#ff0000',
    fillColor: '#0000ff',
    isLock: false
  });
}

Customize Free Text Appearance

Configure default properties using the FreeTextSettings property (for example, default fill color, border color, font color, opacity, and auto‑fit).

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"
        [freeTextSettings]="freeTextSettings"
        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';

  // FreeText annotation default settings
  public freeTextSettings = {
    fillColor: 'green',
    borderColor: 'blue',
    fontColor: 'yellow',
    opacity: 0.3,
    enableAutoFit: true
  };
}

NOTE

To tailor right‑click options, see Customize Context Menu.

Modify, Edit, Delete Free Text

  • Move/Resize: Drag the box or use the resize handles.
  • Edit Text: Click inside the box and type.
  • Delete: Use the toolbar or context menu options. For deletion workflows and API details, see Delete Annotation.

Edit Free Text

Edit Free Text (UI)

Use the annotation toolbar to configure font family, size, color, alignment, styles, fill color, stroke color, border thickness, and opacity.

  • Edit the font family using the Font Family tool.
    Font family

  • Edit the font size using the Font Size tool.
    Font size

  • Edit the font color using the Font Color tool.
    Font color

  • Edit the text alignment using the Text Alignment tool.
    Text alignment

  • Edit the font styles (bold, italic, underline) using the Font Style tool.
    Text styles

  • Edit the fill color using the Edit Color tool.
    Fill color

  • Edit the stroke color using the color palette in the Edit Stroke Color tool.
    Stroke color

  • Edit the border thickness using the Edit Thickness tool.
    Thickness

  • Edit the opacity using the Edit Opacity tool.
    Opacity

Edit Free Text Programmatically

Update bounds or text and call editAnnotation().

editFreeTextProgrammatically(): void {
  const pdfViewer = (document.getElementById('pdfViewer') as any).ej2_instances[0];
  for (const ann of pdfViewer.annotationCollection) {
    if (ann.subject === 'Text Box') {
      const { width, height } = ann.bounds;
      ann.bounds = { x: 120, y: 120, width, height };
      ann.dynamicText = 'Syncfusion (updated)';
      pdfViewer.annotation.editAnnotation(ann);
      break;
    }
  }
}

NOTE

Free Text annotations do not modify the original PDF text; they overlay editable text boxes on top of the page content.

Delete Free Text

Delete Free Text via UI (toolbar/context menu) or programmatically. For supported workflows and APIs, see Delete Annotation.

Set Default Properties During Initialization

Apply defaults for new text boxes using the freeTextSettings property. You can also enable Auto‑fit so the box expands with content.

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"
        [freeTextSettings]="freeTextSettings"
        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';

  // FreeText annotation default settings
  public freeTextSettings = {
    fillColor: 'green',
    borderColor: 'blue',
    fontColor: 'yellow',
    enableAutoFit: true
  };
}

Free Text Annotation Events

Listen to add/modify/select/remove events for Free Text and handle them as needed. For the full list and parameters, see Annotation Events.

Export and Import

Free Text annotations can be exported or imported just like other annotations. For supported formats and steps, see Export and Import annotations.

See Also