Syncfusion AI Assistant

How can I help you?

Strikethrough Annotation (Text Markup) in Angular PDF Viewer

26 Mar 20268 minutes to read

This guide explains how to enable, apply, customize, and manage Strikethrough text markup annotations in the Syncfusion Angular PDF Viewer. You can apply strikethrough using the toolbar or context menu, programmatically invoke strikethrough mode, customize default settings, handle events, and export the PDF with annotations.

Enable Strikethrough in the Viewer

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

This minimal setup enables UI interactions like selection and strikethrough.

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

@Component({
  selector: 'app-root',
  template: `
    <ejs-pdfviewer
      id="container"
      [documentPath]="document"
      [resourceUrl]="resource"
      style="height:650px"
    >
    </ejs-pdfviewer>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService, TextSelectionService]
})
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 Strikethrough Annotation

Add Strikethrough Using the Toolbar

  1. Select the text you want to strike through.
  2. Click the Strikethrough icon in the annotation toolbar.
    • If Pan Mode is active, the viewer automatically switches to Text Selection mode.

Strikethrough tool

Add strikethrough using Context Menu

Right-click a selected text region → select Strikethrough.

Strikethrough Context
To customize menu items, refer to Customize Context Menu documentation.

Enable Strikethrough Mode

Switch the viewer into strikethrough mode using setAnnotationMode('Strikethrough').

enableStrikethrough(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.setAnnotationMode('Strikethrough');
}

Exit Strikethrough Mode

Switch back to normal mode using:

disableStrikethroughMode(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.setAnnotationMode('None');
}

Add Strikethrough Programmatically

Use addAnnotation() to insert a strikethrough at a specific location.

addStrikethrough(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.addAnnotation('Strikethrough', {
    bounds: [{ x: 97, y: 110, width: 350, height: 14 }],
    pageNumber: 1
  });
}

Customize Strikethrough Appearance

Configure default strikethrough settings such as color, opacity, and author using strikethroughSettings.

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

@Component({
  selector: 'app-root',
  template: `
    <ejs-pdfviewer
      id="container"
      [documentPath]="document"
      [resourceUrl]="resource"
      [strikethroughSettings]="strikethroughSettings"
      style="height:650px"
    >
    </ejs-pdfviewer>
  `,
  imports: [PdfViewerModule],
  providers: [ToolbarService, AnnotationService, TextSelectionService]
})
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';
  public strikethroughSettings = {
    author: 'Guest User',
    subject: 'Not Important',
    color: '#ff00ff',
    opacity: 0.9
  };
}

Manage Strikethrough (Edit, Delete, Comment)

Edit Strikethrough

Edit Strikethrough Appearance (UI)

Use the annotation toolbar:

  • Edit Color tool
    Edit color
  • Edit Opacity slider
    Edit opacity

Edit Strikethrough Programmatically

Modify an existing strikethrough programmatically using editAnnotation() and annotationCollection.

editStrikethroughProgrammatically(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  for (let annot of viewer.annotationCollection) {
    if (annot.textMarkupAnnotationType === 'Strikethrough') {
      annot.color = '#ff0000';
      annot.opacity = 0.8;
      viewer.annotation.editAnnotation(annot);
      break;
    }
  }
}

Delete Strikethrough

The PDF Viewer supports deleting existing annotations through both the UI and API. For detailed behavior, supported deletion workflows, and API reference, see Delete Annotation.

Comments

Use the Comments panel to add, view, and reply to threaded discussions linked to strikethrough annotations. It provides a dedicated UI for reviewing feedback, tracking conversations, and collaborating on annotation–related notes within the PDF Viewer.

Set properties while adding Individual Annotation

Set properties for individual annotations when adding them programmatically by supplying fields on each addAnnotation('Strikethrough', …) call.

addMultipleStrikethroughs(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  // Strikethrough 1
  viewer.annotation.addAnnotation('Strikethrough', {
    bounds: [{ x: 100, y: 150, width: 320, height: 14 }],
    pageNumber: 1,
    author: 'User 1',
    color: '#ffff00',
    opacity: 0.9
  });
  // Strikethrough 2
  viewer.annotation.addAnnotation('Strikethrough', {
    bounds: [{ x: 110, y: 220, width: 300, height: 14 }],
    pageNumber: 1,
    author: 'User 2',
    color: '#ff1010',
    opacity: 0.9
  });
}

Disable TextMarkup Annotation

Disable text markup annotations (including strikethrough) using the enableTextMarkupAnnotation property.

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

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

The PDF viewer provides annotation life-cycle events that notify when strikethrough 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, allowing you to save annotations as a separate file or load existing annotations back into the viewer. For full details on supported formats and steps to export or import annotations, see Export and Import Annotation.

See Also