Lucy Muturi for Syncfusion, Inc.

Posted on Jun 9 • Originally published at syncfusion.com on Jun 5

How to Add PDF Annotations in Angular Using a Built-In Toolbar

#pdf #angularpdfviewer #documentprocessing #pdfannotation

TL;DR: Build a review-ready Angular PDF experience with an embedded annotation toolbar, enable highlights, sticky notes, stamps, and shapes to streamline document workflows, improve collaboration, and keep feedback within your application for faster, traceable approvals.

You’ve added a PDF viewer to your Angular app. Users can scroll, zoom, and search documents, a great start.

But the moment someone asks, “Can I highlight this section?” or “Can I leave a comment here?”, the experience breaks. The viewer works, but the review process doesn’t.

Most PDF viewers are built for reading, not reviewing. Real-world applications, contracts, approvals, and engineering plans require annotations, not just rendering.

This is where an embedded PDF annotation experience becomes essential.

In this blog, you’ll integrate a Syncfusion^® Angular PDF Viewer and enable a fully functional annotation toolbar with support for highlights, sticky notes, stamps, and shapes.

Why PDF review workflows fail without in-app annotation tools

When annotation isn’t part of your application, users are forced into fragmented workflows:

Context switching slows everything down Open PDF → download → annotate in another tool → re-upload → send feedback → track manually.
No audit trail for compliance Feedback scattered across emails or chat leaves no reliable record of who reviewed what and when.
User experience breaks Users leave your product to complete tasks elsewhere and may not return.
Approval processes become messy Version conflicts, manual tracking, and disconnected tools introduce delays and errors.

A viewer alone isn’t enough. The review process needs to stay within your application.

Syncfusion Angular PDF Viewer with built-in annotation toolbar

Instead of building annotation functionality from scratch, you can use our Angular PDF Viewer that already includes a configurable annotation toolbar.

No third-party overlay, no custom annotation engine required.

This enables you to turn a basic document viewer into a review-ready interface with minimal setup.

What you get out of the box

Configurable annotation toolbar
Multiple annotation types (text markup, notes, stamps, shapes, ink)
Author tracking and comments panel
Import/export support (JSON/XFDF)
Works across desktop and responsive layouts

Quick setup

Let’s get the viewer running first: 5 steps, under 5 minutes.

Step 1: Install the package

Run the command below to install our Angular PDF Viewer package in your Angular application:

npm CLI

npm install @syncfusion/ej2-angular-pdfviewer --save

Step 2: Add required styles

Add the following Syncfusion Material theme CSS to your style.css file:

style.css

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
@import "../node_modules/@syncfusion/ej2-angular-pdfviewer/styles/material.css";

Step 3: Register required services

Import PdfViewerModule and the required AnnotationService module in your app.module.ts:

app.module.ts

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

@NgModule({
  imports: [PdfViewerModule],
  providers: [
    ToolbarService,
    AnnotationService,
    TextSearchService,
    MagnificationService
  ]
})

Step 4: Add the PDF Viewer component

Open your component template and add the <ejs-pdfviewer> tag to render the PDF Viewer component:

app.component

<ejs-pdfviewer 
       id="pdfViewer" 
       [documentPath]="'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf'" 
       [resourceUrl]="'https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2-pdfviewer-lib'"
       style="height:640px;display:block">
</ejs-pdfviewer>

Step 5: Run the app

Start the development server:

npm CLI

ng serve --open

Angular PDF Viewer

Explore the setup documentation and live demo to see PDF annotation tools like highlights, notes, and stamps in action.

Core PDF annotation features in Angular

Instead of spreading features across separate workflows, annotations bring everything into one place.

Text markup annotations (Highlights, Underline, Strikethrough)

Ideal for contract reviews and document validation:

Highlight key clauses and obligations
Underline sections for discussion
Strike out outdated or invalid terms

This keeps the review context within the document without relying on external tools.

Adding Text Markup annotation

You can explore the text markup annotation documentation for more details.

Read the full blog post on the Syncfusion website.

DEV Community