Blog Post

How to Display PDFs Using Angular

Illustration: How to Display PDFs Using Angular

In this blog post, you’ll learn how to display a PDF document using PSPDFKit’s Angular PDF library. Developed and maintained by Google, Angular is an open source JavaScript framework. It’s written in TypeScript and follows a model-view-controller (MVC) design pattern.

PSPDFKit’s Angular PDF Library

We offer a commercial Angular PDF library that can easily be integrated into your web application. Our Angular viewer supports rendering PDF, JPEG, PNG, and TIFF files in any modern browser and on any mobile device without any plugins.

It comes with 30+ features that let you view, annotate, edit, and sign documents directly in your browser. Out of the box, it has a polished and flexible UI that you can extend or simplify based on your unique use case:

  • A prebuilt and polished UI
  • 15+ annotation tools
  • Cropping and rotation tools
  • Support for multiple file types
  • Dedicated support from engineers



No additional setup is required to use npm, as it’s included with your Node.js installation.

1. Creating a Fresh Angular Project

  1. Install the Angular CLI using npm or Yarn:

    npm install -g @angular/cli
    yarn global add @angular/cli
  2. Create a new Angular application:

    ng new display-pdf
  3. The ng new command lets you configure the features to include in the initial app. Accept the defaults by pressing the Return key.

  4. Change to the project directory:

    cd display-pdf

2. Adding PSPDFKit’s Angular PDF Library

  1. Add the PSPDFKit dependency:

    npm install --save pspdfkit
    yarn add pspdfkit
  2. In the angular.json file at the root directory, add the following to the assets option:

    "assets": [
    +   {
    +       "glob": "**/*",
    +       "input": "./node_modules/pspdfkit/dist/pspdfkit-lib/",
    +       "output": "./assets/pspdfkit-lib/"
    +   }

With this, Angular will now copy the PSPDFKit library assets to the assets directory before running your app.


Make sure your server has the Content-Type: application/wasm MIME type set. Read more about this in the Troubleshooting section of our guides.

3. Displaying a PDF Document

  1. Copy the PDF document you want to display to the src/assets directory. You can use this demo document as an example.

  2. Replace the contents of the app.component.html file in the src/app/ directory with the following:

    <div class="app">
    	<!-- We'll mount the PSPDFKit UI to this element. -->
    		style="width: 100%; height: 100vh"
  3. In the src/app/ directory, replace the contents of the app.component.ts file with the following:

    import { Component } from '@angular/core';
    import PSPDFKit from 'pspdfkit';
    	selector: 'app-root',
    	templateUrl: './app.component.html',
    	styleUrls: ['app.component.css'],
    export class AppComponent {
    	title = 'PSPDFKit for Web Angular Example';
    	ngAfterViewInit() {
    			// Use the assets directory URL as a base URL. PSPDFKit will download its library assets from here.
    				location.protocol + '//' + + '/assets/',
    			// Replace [YOUR-DOCUMENT] with your document's name
    			document: '/assets/[YOUR-DOCUMENT].pdf',
    			container: '#pspdfkit-container',
    		}).then((instance) => {
    			// For the sake of this demo, store the PSPDFKit for Web instance
    			// on the global object so that you can open the dev tools and
    			// play with the PSPDFKit API.
    			(window as any).instance = instance;

The PSPDFKit.load() method creates a new PSPDFKit instance and returns a Promise resolving to a new PSPDFKit.Instance. It requires a configuration object and returns a rejected promise, PSPDFKit.Error, when the configuration is invalid.


Learn more about the properties of a PSPDFKit.load configuration.

  1. Start the app and open it in your default browser:

    npm start --open
    yarn start --open

The result is shown in the image below.

GIF showing the displayed PDF in Angular


In this post, you learned how to display a PDF in Angular using PSPDFKit’s Angular PDF library. If you hit any snags, don’t hesitate to reach out to our Support team for help.

At PSPDFKit, we offer a commercial, feature-rich, and completely customizable web PDF library that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. Try it for free, or visit our demo to see it in action.

Share Post
Free 60-Day Trial Try PSPDFKit in your app today.
Free Trial

Related Articles

Explore more
TUTORIALS  |  Web • Angular • How To

How to Use jsPDF and Angular to Generate PDFs

TUTORIALS  |  Web • Angular • How To • Excel Viewer

How to Build an Angular Excel (XLS/XLSX) Viewer

TUTORIALS  |  Web • Angular • Signing • How To

How to Add Digital Signatures to PDFs Using Angular