How to display PDFs using Angular

This guide shows how to display a PDF document using Nutrient’s Angular PDF library. Angular is an open source JavaScript framework developed and maintained by Google. It’s written in TypeScript and follows a component-based architecture.

Nutrient’s Angular PDF library

We offer a commercial Angular PDF library that integrates 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 plugins.

Once you’ve displayed a PDF, you can extend your app with powerful document capabilities:

• Annotations — Let users highlight text, add comments, draw, and place stamps
• Form filling — Display and complete interactive PDF forms with text fields, checkboxes, and dropdowns
• Electronic signatures — Capture signatures via drawing, typing, or image upload
• Document editing — Rotate, reorder, merge, and split pages
• Text search — Find and highlight text across documents
• Redaction — Permanently remove sensitive information

All features ship with a polished, customizable UI and dedicated engineering support.

Requirements

• A long-term support (LTS) version of Node.js(opens in a new tab)
• A package manager — npm(opens in a new tab) or Yarn(opens in a new tab)

1. Creating a fresh Angular project

1. Install the Angular CLI(opens in a new tab) using npm(opens in a new tab) or Yarn(opens in a new tab):

   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 Nutrient’s Angular PDF library

1. Add the Nutrient dependency:

   npm install --save @nutrient-sdk/viewer
   
   yarn add @nutrient-sdk/viewer

2. In the angular.json file at the root directory, add the following to the assets option:

   "assets": [
       "src/assets",
      {
       "glob": "**/*",
        "input": "./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib/",
        "output": "./assets/nutrient-viewer-lib/"
      }
   ]

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

3. Displaying a PDF document

1. Copy the PDF document you want to display to the public/ 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 Nutrient UI to this element. -->
     <div
       id="nutrient-container"
       style="width: 100%; height: 100vh"
     ></div>
   </div>

3. In the src/app/ directory, replace the contents of the app.component.ts file with the following:

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

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

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

   npm start --open
   
   yarn start --open

Next steps

You now have a working PDF viewer in your Angular app. From here, you can:

• Add annotations — Enable users to highlight, comment, and markup documents. See our annotation guide.
• Enable form filling — Let users complete interactive PDF forms. See our form filling guide.
• Capture signatures — Add electronic signature capture to your workflow. See our signature guide.

If you encounter issues, contact our Support team for help.

Try Nutrient for free or explore the live demo to see all features in action.

FAQ