How to Load and View PDF Files in an Angular App
Tags: angular, javascript, webdev
Published: 2021-06-02 11:47:42

---
title: How to Load and View PDF Files in an Angular App
published: true
date: 2021-06-01 10:00:06 UTC
tags: angular, javascript, webdev
canonical_url: https://www.syncfusion.com/blogs/post/load-and-view-pdf-files-in-an-angular-app.aspx
cover_image: https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/How-to-Load-and-View-PDF-Files-in-an-Angular-App-672x372.png
---

This blog shows you how to display a PDF file in an Angular application using Syncfusion’s [Angular PDF Viewer](https://www.syncfusion.com/angular-ui-components/angular-pdf-viewer "Link to Angular PDF Viewer") control.

The PDF Viewer control allows you to view, print, form-fill, and annotate PDF files in your web applications. It provides the best viewing experience with core interactions such as zooming, scrolling, text search, text selection, and copying. The thumbnail, bookmark, hyperlink, and table of contents support provide easy navigation within and outside the PDF files. The PDF Viewer component was developed from the ground up to be lightweight, responsive, modular, and touch-friendly.

**Note: ** This PDF Viewer control requires a server-side back end Web API service to render PDF content.

## Key features

The key features of the Angular PDF Viewer:

- **Toolbar** : Built-in toolbar for better user interaction.
- **Magnification** : Perform zooming operations for a better viewing experience.
- **Navigation** : Easy navigation across PDF pages through link annotation, thumbnail view, and bookmark view.
- **Text Selection** : Select and copy text from a PDF file.
- **Text Search** : Search for text easily in a PDF document.
- **Print** : Print the entire document, a specific page, or a range of pages directly from the browser.
- **Download** : Download a loaded or edited (form-filled and annotated) PDF file.
- **Annotation** : Annotations can be added or edited in the PDF document. Supported annotations are highlight, underline, strikethrough, line, arrow, rectangle, circle, polygon, distance, perimeter, area, radius, volume, free text, handwritten signature, ink, stamp, image, and sticky notes.
- **Import and export annotations** : Annotations can be imported and exported as XFDF and JSON format.
- **AcroForm fields:** Fill and edit form fields in a PDF document. Supported form fields are text box, combo box, radio button, and check box.
- **Import and export AcroForm fields:** Form field data can be imported from and exported as JSON format.

Let’s dive into the steps to set up the PDF Viewer component in an Angular app.

## Prerequisites

To set up a basic Angular sample, the following items are required:

- [Node.js](https://nodejs.org/en/ "Link to download Node.js")
- [Angular 4](https://angular.io/ "Link to download Angular") or a higher version
- [Visual Studio Code](https://code.visualstudio.com/download "Link to download Visual Studio Code")
- [Docker](https://www.docker.com/products/container-runtime#/download "Link to docker page")
  - If using Windows, install [Docker for Windows](https://hub.docker.com/editions/community/docker-ce-desktop-windows "Link to download Docker Desktop for Windows").
  - If using macOS, install [Docker for Mac](https://docs.docker.com/docker-for-mac/install/ "Link to Install Docker Desktop on Mac documentation").

## Configure the PDF Viewer server-side service

The PDF Viewer component uses a server-side back end (web service) to render pages and extract PDF content. We have provided a server-side back end (web service) as a Docker image so you can quickly get started with our PDF Viewer component.

**Step 1:**  Pull the [pdfviewer-server](https://hub.docker.com/r/syncfusion/pdfviewer-server "Link to syncfusion/pdfviewer-server on Docker Hub") image from Docker Hub.

| `docker pull syncfusion/pdfviewer-server` |

**Note:** PDF Viewer is a commercial product, and it requires a valid license to use it in a production environment [(request license or trial key)](https://help.syncfusion.com/common/essential-studio/licensing/licensing-faq/where-can-i-get-a-license-key "Link to get Syncfusion license key").

**Step 2:**  Create the docker-compose.yml file with the following code in your file system.

```js
version: '3.4' 

services: 
 pdfviewer-server:
    image: syncfusion/pdfviewer-server:latest
    environment: 
      #Provide your license key for activation
       SYNCFUSION_LICENSE_KEY: YOUR_LICENSE_KEY
    volumes: 
      - C:\Docker\Data:/app/Data
    ports:
    - "6001:80"
```

**Note:** To load a default PDF template during the control initialization, you must use the folder path, which contains PDF files in the volumes section of the docker-compose file.

**Step 3:**  In a terminal tab, navigate to the directory where you’ve placed the docker-compose.yml file and execute the following command.

| `docker-compose up` |

**Step 4:** Run the Docker container along with the license key using this docker run command.

| `docker run -d -p 6001:80 –e SYNCFUSION_LICENSE_KEY=YOUR_LICENSE_KEY syncfusion/pdfviewer-server:latest`

For Ex: docker run -d -p 6001:80 –e SYNCFUSION\_LICENSE\_KEY=Mzg1ODMzQDMxMzgyZTM0MmUzMGdFRGJvUno1MUx4Tit4S09CeS9xRHZzZU4ySVBjQVFuT0VpdWpHUWJ6aXM9 syncfusion/pdfviewer-server:latest

 |

Now the PDF Viewer server Docker instance runs in the localhost with the provided port number  **http://localhost:6001**. Open this link in a browser and navigate to the PDF Viewer Web API control  **http://localhost:6001/api/pdfviewer**. It returns the default get method response.

**Note:** This predefined Docker image ([pdfviewer-server](https://hub.docker.com/r/syncfusion/pdfviewer-server "Link to syncfusion/pdfviewer-server on Docker Hub")) contains Web APIs mandatory for the PDF Viewer control, such as opening, text selection, text search, and saving PDF documents. If you want to add a new functionality or customize an existing functionality, you can build your own Docker image from the existing Docker project from this [PDF Viewer server](https://github.com/SyncfusionExamples/PdfViewer-Server "Link to Configure the PDF Viewer server-side service demo on GitHub") project.

## Integrate the Syncfusion Angular PDF Viewer control into the Angular project ** **

1. [Create an Angular project](https://angular.io/tutorial/toh-pt0 "Link to create a new Angular project documentation").

2. Install Syncfusion’s EJ2 Angular PDF Viewer NuGet package using the following command. The  **—save ** command instructs the NPM to add the PDF Viewer package inside the dependencies section of the  **package.**** json**.  

| `npm install @syncfusion/ej2-angular-pdfviewer –save` |

3. Import the PDF Viewer module into an Angular application (app.module.ts) from the **package @syncfusion/ej2-angular-pdfviewer[src/app/app.module.ts]**. Refer to the following code example.
```js
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

//Imported syncfusion PdfViewer component from PdfViewer package
import {
 PdfViewerModule
} from '@syncfusion/ej2-angular-pdfviewer';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,PdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

4. The following CSS files will be available in the ** ../node\_modules/@syncfusionpackage** folder. Add the references to these files in [src/styles.css] using the following code.
```js
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
```

5. Modify the template in the [src/app/app.component.ts] file to render the PDF Viewer component. Add the Angular PDF Viewer by using the <ejs-pdfviewer> selector in template section of the app.component.ts file.
```js
import { Component, OnInit } from '@angular/core';
import {
  LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
   ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
 } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-root',
  template: `<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
   //tslint:disable-next-line:max-line-length
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
  title = 'syncfusion-pdfviewer-angular-app';
// set the service URL to PdfViewerControl
  public service = 'http://localhost:6001/api/pdfviewer';
//Default document to render in the PdfViewerControl
  public document: string = “" ; 
}
```

6. Now, execute the application using the following command.  

| `Ng serve –open` |

After all the files are compiled successfully, it will display an empty PDF Viewer control

![PDF Viewer Control in Angular Application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/PDF-Viewer-Control-in-Angular-Application.png)<figcaption>PDF Viewer Control in Angular Application</figcaption>

## Load or open a default PDF template

You can load an existing PDF document while initializing the PDF Viewer control by setting the documentPath of the Angular PDF Viewer component in app.component.html.

**Note:** You must have placed the PDF files in the data folder used in the volumes section (i.e., C:\Docker\Data) of the docker-compose.yml file.

```js
import { Component, OnInit } from '@angular/core';
import {
  LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
   ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
 } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-root',
  template: `<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
   //tslint:disable-next-line:max-line-length
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
  title = 'syncfusion-pdfviewer-angular-app';
// set the service URL to PdfViewerControl
  public service = 'http://localhost:6001/api/pdfviewer';
//Default document to render in the PdfViewerControl
  public document: string = "Angular Succinctly.pdf" ; 
}
```

![PDF Document Loaded During Initialization in Angular Application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/PDF-Document-Loaded-During-Initialization-in-Angular-Application.png)<figcaption>PDF Document Loaded During Initialization in Angular Application</figcaption>

## Load or open a PDF file from URL ** **

You can load a PDF document from a URL in the Angular PDF Viewer component in app.component.html.

```js
import { Component, OnInit } from '@angular/core';
import {
  LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
   ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
 } from '@syncfusion/ej2-angular-pdfviewer';
@Component({
  selector: 'app-root',
  template: `<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
   //tslint:disable-next-line:max-line-length
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
  title = 'syncfusion-pdfviewer-angular-app';
// set the service URL to PdfViewerControl
  public service = 'http://localhost:6001/api/pdfviewer';
//Default document to render in the PdfViewerControl
  public document: string = "https://www.syncfusion.com/downloads/support/directtrac/general/pd/JavaScript_Succinctly-1664489739"; 
}
```

![PDF Document Loaded from a URL in Angular Application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/05/PDF-Document-Loaded-from-a-URL-in-Angular-Application.png)<figcaption>PDF Document Loaded from a URL in Angular Application</figcaption>

## Resources

For more information, please refer to the [load and view PDF documents in Angular applications project](https://github.com/SyncfusionExamples/ej2-angular-pdfviewer "Link to Angular PDF Viewer demos on GitHub").

## Conclusion

Thank you for reading this blog! I hope you now have a clear idea about setting up the PDF Viewer server-side API using predefined Docker images and integrating the PDF Viewer component in an Angular application. We have also seen how to load a PDF document during application initialization and from an URL in detail.

Our PDF Viewer control is also available in the platforms [Blazor](https://www.syncfusion.com/blazor-components/blazor-pdf-viewer "Link to Blazor PDF Viewer"), [Flutter](https://www.syncfusion.com/flutter-widgets/flutter-pdf-viewer "Link to Flutter PDF Viewer"), [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls/pdf-viewer "Link to ASP.NET Core PDF Viewer"), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls/pdf-viewer "Link to ASP.NET MVC PDF Viewer"), [ASP.NET Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls/pdf-viewer "Link to ASP.NET Web Forms PDF Viewer"), [JavaScript](https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer "Link to JavaScript PDF Viewer"), [React](https://www.syncfusion.com/react-ui-components/react-pdf-viewer "Link to React PDF Viewer"), [Vue](https://www.syncfusion.com/vue-ui-components/vue-pdf-viewer "Link to Vue PDF Viewer"), [Xamarin.Forms](https://www.syncfusion.com/xamarin-ui-controls/xamarin-pdf-viewer "Link to Xamarin PDF Viewer"), [UWP](https://www.syncfusion.com/uwp-ui-controls/pdf-viewer "Link to UWP PDF Viewer"), [WinForms](https://www.syncfusion.com/winforms-ui-controls/pdf-viewer "Link toWinForms PDF Viewer"), [WPF](https://www.syncfusion.com/wpf-controls/pdf-viewer "Link to WPF PDF Viewer").

For existing customers, the new version of Essential Studio is available for download from the [License and Downloads](https://www.syncfusion.com/account/downloads "Link to license and download page of Essential Studio") page. If you are not yet a Syncfusion customer, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Link to the free evaluation of the Syncfusion Essential Studio") to check out our available features.

You can also contact us through our [support forum](https://www.syncfusion.com/forums "Link to the Syncfusion support forum"), [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents "Link to the Syncfusion support system Direct Trac"), or [feedback portal](https://www.syncfusion.com/feedback/angular "Link to Syncfusion Angular Feedback Portal"). We are here to help you succeed!

## Related blogs

- [Top 5 Best Practices for Angular App Security](https://dev.to/syncfusion/top-5-best-practices-for-angular-app-security-3a7k "Link to Top 5 Best Practices for Angular App Security blog")
- [Customize the UI of the Angular Query Builder](https://dev.to/karthickramasamy08/how-to-customize-the-ui-of-the-angular-query-builder-54d2-temp-slug-4020231 "Link to How to Customize the UI of the Angular Query Builder blog")
- [Integrate Third-Party Libraries into Angular Rich Text Editor](https://dev.to/syncfusion/how-to-integrate-third-party-libraries-into-angular-rich-text-editor-o2m "Link to How to Integrate Third-Party Libraries into Angular Rich Text Editor blog")
- [Load a Million+ Records in Less Than a Second in Syncfusion Angular Data Grid](https://dev.to/syncfusion/how-to-load-a-million-records-in-less-than-a-second-in-syncfusion-angular-data-grid-3kb4 "Link to How to Load a Million+ Records in Less Than a Second in Syncfusion Angular Data Grid blog")