Angular PDF Viewer Component

The Syncfusion® Angular PDF Viewer component enables you to view, annotate, prepare and fill forms, and print PDF files from your web applications.

Getting started .
Online demos .
Learn more

Trusted by the world's leading companies

Setup

$3

You can use Angular CLI to setup your Angular applications. To install the Angular CLI, use the following command.

``bash
npm install -g @angular/cli
`

Create a new Angular application using the following Angular CLI command.

`bash
ng new my-app
cd my-app
`

$3

All Syncfusion® Angular packages are available in npmjs.com. To install the Angular PDF Viewer package, use the following command.

`bash
ng add @syncfusion/ej2-angular-pdfviewer
`

The above command does the below configuration to your Angular app.

* Adds @syncfusion/ej2-angular-pdfviewer package and its peer dependencies to your package.json file.
* Imports the PdfViewerModule in your application module app.module.ts.
* Registers the Syncfusion® UI default theme (material) in the angular.json file.

This makes it easy to add the Syncfusion® Angular PDF Viewer module to your project and start using it in your application.

$3

Add CSS references needed for a PDF Viewer in src/styles.css from the ../node_modules/@syncfusion package folder.

`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";
`

$3

In src/app/app.component.ts, use selector in the template attribute of the @Component directive to render the Syncfusion® Angular PDF Viewer component.

`typescript
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import {
PdfViewerComponent,
LinkAnnotationService,
BookmarkViewService,
MagnificationService,
ThumbnailViewService,
ToolbarService,
NavigationService,
TextSearchService,
TextSelectionService,
PrintService,
AnnotationService,
FormFieldsService,
FormDesignerService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
selector: 'app-root',
template:

Supported frameworks

PDF Viewer component is also offered in the following list of frameworks.

|
     JavaScript     |
       React       |
       Vue          |
  ASP.NET Core   |
  ASP.NET MVC   |
| :-----: | :-----: | :-----: | :-----: | :-----: |

Key features

* View PDF Document - Open and display both the normal and the protected PDF files with AES and RC4 encryption.
* Annotations - Annotate with text markup, shapes, stamps, ink, and sticky notes.
* Form Fields - Form filling and form designing can be done.
* Signature - Hand-written and digital signatures are allowed.
* Toolbar - Built-in-toolbar and custom toolbars to perform user interaction of PDF Viewer functionalities.
* Navigation - Easy navigation with the help of bookmarks, thumbnails, hyperlinks, and table of contents.
* Magnification - Fit to page, fit to width, and automatic (fits to the visible area).
* Search - Search a text easily across the PDF document.
* Core Interactions - Allows scrolling, zooming, panning, selection, and page navigation.
* Print - Print the entire document or a specific page directly from the browser.
* Globalization - Provides inherent support to localize the UI.

Resources

* Theme Studio
* What's New
* Road Map
* E-Books

Support

Product support is available through the following mediums.

* Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
* Community forum
* GitHub issues
* Request feature or report bug
* Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

> This is a commercial product and requires a paid license for possession or use. Syncfusion^® licensed software, including this component, is subject to the terms and conditions of Syncfusion^® EULA. To acquire a license for 140+ Angular UI components, you can purchase or start a free 30-day trial.

> A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

© Copyright 2026 Syncfusion^® Inc. All Rights Reserved. The Syncfusion^® Essential Studio^® license and copyright applies to this distribution.