Stamp Annotation in Angular PDF Viewer

25 Sep 202612 minutes to read

Stamp annotations allow you to place predefined or custom stamps (such as Dynamic, Sign Here, Standard Business, or Custom) on a PDF to communicate review states, approvals, or instructions. You can add stamps from the toolbar, switch to specific stamp modes programmatically, customize defaults (e.g., opacity/author), edit or lock them, and export them with the document.

Stamp annotations

Enable Stamp Annotation in the Viewer

To enable Stamp 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="container"
        [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 Stamp Annotation

Add Stamp Using the Toolbar

  1. Open the Annotation Toolbar using the showAnnotationToolbar method, or ensure it is enabled via annotationToolbarItems. For details, see Annotation Toolbar.
  2. Choose Stamp to open the stamp gallery.
    Stamp toolbar
  3. Select a stamp type (Dynamic, Sign Here, Standard Business, or Custom) and click on the page to place it.
    Select stamp

When Pan mode is active and a stamp tool is chosen, the viewer automatically switches to selection mode for a smoother interaction.

Enable a Specific Stamp Mode

Switch the viewer into a specific stamp annotation mode programmatically.

enableDynamicStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.setAnnotationMode('Stamp', 'NotApproved');
}

enableSignHereStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.setAnnotationMode('Stamp', null, 'Witness');
}

enableStandardBusinessStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.setAnnotationMode('Stamp', null, null, 'Approved');
}

Exit Stamp Mode

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

Add Stamp Programmatically

Use the addAnnotation API to place stamps at specific coordinates.

// Dynamic stamp
addDynamicStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 140 }, pageNumber: 1 }, 'Approved');
}

// Sign Here stamp
addSignStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 240 }, pageNumber: 1 }, undefined, 'Witness');
}

// Standard Business stamp
addStandardBusinessStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.addAnnotation('Stamp', { offset: { x: 200, y: 340 }, pageNumber: 1 }, undefined, undefined, 'Approved');
}

// Custom stamp (JPG/JPEG only)
addCustomStamp(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  viewer.annotation.addAnnotation('Stamp', {
    offset: { x: 100, y: 440 },
    width: 100,
    height: 46,
    author: 'Guest',
    isLock: true,
    pageNumber: 1,
    customStamps: [
      {
        customStampName: 'Image',
        customStampImageSource: 'data:image/jpeg;base64,REPLACE_WITH_YOUR_BASE64_IMAGE_DATA'
      }
    ]
  });
}

For Custom Stamp via the UI, only JPG/JPEG image formats are supported.

Add Text Stamp and Image Stamp

The Stamp tool includes both Text Stamp and Image Stamp options alongside the built-in dynamic and business stamps. These features belong to the same Stamp annotation category and are documented on this page instead of as separate pages.

Add a text stamp in the UI

  1. Open the Annotation Toolbar.
  2. Click Stamp to open the stamp gallery.
  3. Select Text Stamp.
  4. In the Create new text stamp dialog, configure the title, subtitle, font, color, background, date/time format, and styling options such as bold, underline, and strikeout.

Text Stamp

  1. Click Create to place the stamp on the page.

Text Stamp dialog

Add an image stamp in the UI

  1. Open the Annotation Toolbar.
  2. Click Stamp to open the stamp gallery.
  3. Select Image Stamp.
  4. Choose an image source or upload the required image.
  5. Click the PDF page to place the image stamp.

Image Stamp

Add predefined text stamps to the submenu

You can add predefined text stamps and show them in the Text Stamp submenu by configuring customTextStamps in the viewer settings. Use fontFamilyCollection to provide the font list that should be available for text stamp styling in the UI.

const viewer = (document.getElementById('container') as any).ej2_instances[0];
viewer.customStampSettings = {
  fontFamilyCollection: ['Arial', 'Times New Roman', 'Courier New'],
  customTextStamps: [{
    title: 'Draft',
    subtitle: '[$author] DD/MMMM/YYYY, h:mm A',
    bold: true,
    textColor: '#000000',
    backgroundColor: '#1693f8',
    fontFamily: 'Arial'
  }]
};

Add custom text stamp annotation programmatically

Use addAnnotation('Stamp', ...) with customTextStamps to create a text stamp at a specific location.

const viewer = (document.getElementById('container') as any).ej2_instances[0];
viewer.annotation.addAnnotation('Stamp', {
  offset: { x: 100, y: 200 },
  pageNumber: 1,
  customTextStamps: [{
    title: 'Draft',
    subtitle: '[$author] DD/MMMM/YYYY, h:mm A',
    bold: true,
    textColor: '#000000',
    backgroundColor: '#1693f8',
    underline: true,
    fontFamily: 'Arial',
    strikeout: true
  }]
});

Add image stamp annotation programmatically

Use addAnnotation('Stamp', ...) with an image source to insert a custom image stamp.

const viewer = (document.getElementById('container') as any).ej2_instances[0];
viewer.annotation.addAnnotation('Stamp', {
  offset: { x: 100, y: 300 },
  pageNumber: 1,
  width: 160,
  height: 80,
  customStamps: [{
    customStampName: 'Image',
    customStampImageSource: 'data:image/png;base64,REPLACE_WITH_YOUR_BASE64_IMAGE_DATA'
  }]
});

The new Image Stamp and Text Stamp capabilities belong to the same Stamp annotation feature set and are best documented in the existing Stamp annotation page under a dedicated subsection.

Customize Stamp Appearance

Configure default properties using the stampSettings property (for example, default opacity and author).

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

@Component({
  selector: 'app-root',
  template: `
    <ejs-pdfviewer
      id="container"
      [documentPath]="document"
      [resourceUrl]="resource"
      [stampSettings]="stampSettings"
      style="height:650px;display:block">
    </ejs-pdfviewer>
  `,
  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';
  public stampSettings = { opacity: 0.3, author: 'Guest User' };
}

After changing opacity via the Edit Opacity tool in the toolbar, the updated value becomes the working default for subsequent placements in the current session.

Manage Stamp (Move, Resize, Rotate, Lock/Unlock, Delete)

Edit Stamp Annotation

Edit & Arrange (UI)

  • Move: drag the stamp to reposition it.
  • Resize: use corner handles to change size.
  • Rotate: use the rotation handle (where available) to rotate the stamp.
  • Opacity: adjust using the Edit Opacity tool in the annotation toolbar.
  • Lock/Unlock: lock a selected stamp from the context menu to prevent edits.

Edit Stamp Programmatically

Modify bounds or lock state, then call editAnnotation().

editStampProgrammatically(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];
  for (const ann of viewer.annotationCollection) {
    // shapeAnnotationType is 'stamp' for stamp annotations
    if (ann.shapeAnnotationType === 'stamp') {
      const { width, height } = ann.bounds;
      ann.bounds = { x: 100, y: 100, width, height };
      ann.annotationSettings = ann.annotationSettings || {};
      ann.annotationSettings.isLock = true; // lock the stamp
      viewer.annotation.editAnnotation(ann);
      break;
    }
  }
}

Delete Stamp

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

Set properties while adding Individual Annotation

You can pass per‑annotation values (e.g., type, position, size, author, isLock, or customStamps) when calling addAnnotation.

addMultipleStamps(): void {
  const viewer = (document.getElementById('container') as any).ej2_instances[0];

  // Dynamic stamp – Approved
  viewer.annotation.addAnnotation('Stamp', { offset: { x: 180, y: 140 }, pageNumber: 1 }, 'Approved');

  // Sign Here – Witness
  viewer.annotation.addAnnotation('Stamp', { offset: { x: 180, y: 240 }, pageNumber: 1 }, undefined, 'Witness');

  // Standard Business – Approved
  viewer.annotation.addAnnotation('Stamp', { offset: { x: 180, y: 340 }, pageNumber: 1 }, undefined, undefined, 'Approved');
}

Handle Stamp Events

The PDF viewer provides annotation life‑cycle events that notify when Stamp 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 stamps and reload them later. For supported formats and steps, see Export and Import annotations.

See Also