--- title: "ng2-pdf-viewer tutorial: View PDFs in Angular (2026)" canonical_url: "https://www.nutrient.io/blog/how-to-build-an-angular-pdf-viewer-with-ng2-pdf-viewer/" md_url: "https://www.nutrient.io/blog/how-to-build-an-angular-pdf-viewer-with-ng2-pdf-viewer.md" last_updated: "2026-08-03T02:28:10.022Z" description: "Use the ng2-pdf-viewer library to display PDFs in Angular — setup, rendering, and viewer controls, with a Nutrient Web SDK comparison for annotations and forms." --- In this blog post, we’ll walk you through building an Angular PDF viewer using the popular [`ng2-pdf-viewer`](https://www.npmjs.com/package/ng2-pdf-viewer) library. ng2-pdf-viewer is a powerful, open source library designed for rendering PDF files in Angular applications. In our example, we’ll show how to implement navigation between pages, display the page number, and get the total number of pages with ng2-pdf-viewer. Keep in mind that `ng2-pdf-viewer` doesn’t provide an out-of-the-box user interface (UI), but you can build your own user interface with custom code. `ng2-pdf-viewer` is a widely used open source Angular PDF library, and it can be used as a core viewer. In the final section of this post, we’ll provide a walkthrough of how you can integrate the Nutrient [Angular PDF viewer library](https://www.nutrient.io/guides/web/viewer.md) into an Angular project. Our commercial viewer comes with a customizable UI and out-of-the-box tools like annotations, eSignatures, PDF editing, form filling, and more. You can also check out our [Angular PDF.js blog](https://www.nutrient.io/blog/how-to-build-an-angular-pdf-viewer-with-pdfjs.md), in which we build a PDF viewer using `ngx-extended-pdf-viewer`. ### Introduction to ng2-pdf-viewer `ng2-pdf-viewer` is a widely used PDF viewer component for Angular applications, offering a seamless way to render PDF files directly within your app. This robust and user-friendly library supports both local and remote PDF files, making it a versatile choice for developers aiming to add PDF viewing capabilities to their Angular projects. With `ng2-pdf-viewer`, you can easily integrate PDF functionality, with options for zooming, rotating, and navigating through PDF pages, all customizable to fit the needs of your application. This component is particularly valuable for projects where users need to view, interact with, or manipulate PDF documents. Whether handling simple documents or complex PDF files, `ng2-pdf-viewer` is an ideal choice for enhancing user experience in Angular applications. ## Requirements for building an Angular PDF viewer with ng2-pdf-viewer To get started, you’ll need: - The [latest version of Node.js](https://nodejs.org/en/). - A package manager for installing the Angular CLI and importing packages. You can use [npm](https://docs.npmjs.com/cli/v7/commands/npm) or [Yarn](https://yarnpkg.com/). When you install Node.js, npm is installed by default. ### Setup for ng2-pdf-viewer in Angular Go to your terminal and install the [Angular command-line interface (CLI)](https://angular.io/cli). This will help you get up and running quickly with Angular: ```txt npm install -g @angular/cli ``` ```txt yarn global add @angular/cli ``` Now, you can check the version of Angular: ```bash ng version ``` ## Building an Angular PDF viewer with ng2-pdf-viewer 1. Create a new Angular project from your terminal: ```bash ng new ng2-pdf-viewer ``` Choose `No` for adding Angular routing, and choose `CSS` for the stylesheet. 2. Change your directory into the newly created folder: ```bash cd ng2-pdf-viewer ``` ### Adding ng2-pdf-viewer to your Angular project 1. Run the command below to install the `ng2-pdf-viewer` library via `npm` or `yarn`. This will install the latest version of the library: ```txt npm install ng2-pdf-viewer ``` ```txt yarn add ng2-pdf-viewer ``` 2. Now, go to the `app.module.ts` file and import `PdfViewerModule` from `ng2-pdf-viewer` and pass it to the `imports` array: ```ts import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { PdfViewerModule } from "ng2-pdf-viewer"; // Import `PdfViewerModule`. import { AppComponent } from "./app.component"; @NgModule({ declarations: [AppComponent], imports: [BrowserModule, PdfViewerModule], providers: [], bootstrap: [AppComponent], }) export class AppModule {} ``` ### Displaying a PDF with ng2-pdf-viewer 1. Add your PDF document to the `src/assets` directory. You can use our [demo document](https://www.nutrient.io/example.pdf) as an example. 2. Go to the `app.component.html` file and replace the contents of the file with the `` tag. You’ll use the `src` attribute to specify the path to the PDF document: ```html ``` There are many configuration options you can use. You can see all the [options](https://github.com/VadimDez/ng2-pdf-viewer/blob/master/README.md#options) in the `ng2-pdf-viewer` documentation. 3. You have to specify the width and height of the viewer. You can add styles to your `app.component.css` file: ```css.pdf-viewer { height: 100vh; width: 80vw; display: block; margin: 0 auto; } ``` 4. Now, go to `src/app/app.component.ts` and declare the `src` property to point to the PDF document you want to display: ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { title: string = "ng2-pdf-viewer"; src: string = "assets/document.pdf"; // Path to your PDF document. } ``` 5. All that’s left is to run your project. You can do this by executing the following command: ```bash ng serve ``` Now, navigate to `localhost:4200` to see your PDF file.![ng2-pdf-viewer demo](@/assets/images/blog/2021/how-to-build-an-angular-pdf-viewer-with-ng2-pdf-viewer/ng2-demo.png) ## Adding navigation features to your ng2-pdf-viewer PDF viewer 1. You’ll add previous and next buttons, the page number, and the total number of pages. For this, go back to the `app.component.html` file and add the following code: ```html
``` In the code above, you changed the `show-all` property to `false` to display only one page at a time. You also added a `page` property to dynamically display the current page. The `after-load-complete` event is triggered when the PDF is loaded. You can use this event to get the `totalPages` property. 2. Now, go to the `app.component.ts` file and add the following code: ```ts import { Component } from "@angular/core"; @Component({ selector: "app-root", templateUrl: "./app.component.html", styleUrls: ["./app.component.css"], }) export class AppComponent { title: string = "ng2-pdf-viewer"; src: string = "assets/document.pdf"; page: number = 1; totalPages: number = 0; isLoaded: boolean = false; afterLoadComplete(pdfData: any) { this.totalPages = pdfData.numPages; this.isLoaded = true; } nextPage() { this.page++; } prevPage() { this.page--; } } ``` You can access the project on [GitHub](https://github.com/PSPDFKit-labs/ng2-web-example-angular). ## Optimizing performance and compatibility To enhance performance and compatibility, you can implement the following techniques with `ng2-pdf-viewer`: - **Lazy loading** — Use lazy loading to load PDF files only when required, minimizing the initial load time, and enhancing app performance. - **Caching** — Caching frequently accessed PDF files can reduce reload times and decrease server requests, enhancing efficiency. - **Using `ngZone` and `ChangeDetectorRef`** — For improved performance, you can use Angular’s `NgZone` service to run the PDF viewer’s operations outside Angular’s default change detection. Additionally, `ChangeDetectorRef` allows you to manually control change detection, reducing unnecessary cycles, and boosting performance. ## Building an Angular PDF viewer with Nutrient Nutrient offers a powerful PDF library that can be used to build your own Angular PDF viewer. On top of all the features you get with an open source library, some additional features you get with Nutrient include: - Improved rendering performance - PDF editing and annotating - Image and MS Office file viewing - Powerful document search - A rich bookmark UI that enables you to add, remove, and sort bookmarks - Dark mode support - Responsive design - PDF form viewing and designing - And much more You can integrate it into your existing or new Angular projects with a couple of steps. Now, you’ll return to the tutorial and see how to integrate Nutrient into your Angular project. ### Step 1: Create a new Angular project Start by generating a new Angular project: ```bash ng new nutrient-angular-viewer ``` When prompted: - Choose `No` for Angular routing - Choose `CSS` for stylesheet format Then navigate to your project directory: ```bash cd nutrient-angular-viewer ``` ### Step 2: Install Nutrient Web SDK Install the SDK with your package manager: ```bash yarn add @nutrient-sdk/viewer ``` Or, install it with npm: ```bash npm install @nutrient-sdk/viewer ``` ### Step 3: Configure angular.json to include SDK assets In `angular.json`, locate the `assets` array and add the following entry to copy the Nutrient SDK files: ```json "assets": [ "src/assets", { "glob": "**/*", "input": "./node_modules/@nutrient-sdk/viewer/dist/nutrient-viewer-lib/", "output": "./assets/nutrient-viewer-lib/" } ] ``` This allows Nutrient to access its library files from the `assets` directory at runtime. ### Step 4: Add the PDF viewer component Generate a new component: ```bash ng generate component pdf-viewer ``` Replace the content of `pdf-viewer.component.html` with the following code to create a container for the Nutrient viewer: ```html
``` Replace `pdf-viewer.component.ts` with the following code to initialize the Nutrient viewer: ```ts import { Component, OnInit } from "@angular/core"; import NutrientViewer from "@nutrient-sdk/viewer"; @Component({ selector: "pdf-viewer", templateUrl: "./pdf-viewer.component.html", styleUrls: ["./pdf-viewer.component.css"], standalone: true, }) export class PdfViewerComponent implements OnInit { ngOnInit(): void { NutrientViewer.load({ baseUrl: `${location.protocol}//${location.host}/assets/`, container: "#nutrient-container", document: "/assets/document.pdf", // replace with your document }).then((instance) => { (window as any).instance = instance; }); } } ``` This code initializes the Nutrient viewer and loads a sample PDF document. You can replace the `document` path with your own PDF file. Place your PDF document in the `src/assets/` directory — for example, `document.pdf`. ### Step 5: Use the viewer in your app Open `app.component.ts` and import the component: ```ts import { Component } from "@angular/core"; import { PdfViewerComponent } from "./pdf-viewer/pdf-viewer.component"; @Component({ selector: "app-root", standalone: true, imports: [PdfViewerComponent], template: "", }) export class AppComponent {} ``` ### Step 6: Run the app Use the Angular CLI to start your development server: ```bash yarn start ``` _or_ ```bash npm start ``` Then open `http://localhost:4200` in your browser. You’ll see the Nutrient PDF viewer embedded with a full UI. You can access the project on [GitHub](https://github.com/PSPDFKit/nutrient-web-examples/tree/main/examples/angular). ## Adding even more capabilities Once you’ve deployed your viewer, you can start customizing it to meet your specific requirements or easily add more capabilities. To help you get started, here are some of our most popular Angular guides: - [Adding annotations] - [Editing documents] - [Filling PDF forms] - [Adding signatures to documents] - [Real-time collaboration] - [Redaction] - [UI customization] ## Conclusion In this post, you learned how to set up an Angular PDF viewer using `ng2-pdf-viewer`, along with how to add basic navigation features. For simple use cases where the primary objective is viewing PDF documents, `ng2-pdf-viewer` offers a great low-cost solution. For more complex use cases, a commercial PDF viewer can provide some additional benefits: - An out-of-the-box UI to help speed up development time. Quickly deploy a polished UI in your application and use well-documented APIs to customize the design and layout. - Embed prebuilt tools to easily add functionality like annotating documents, editing PDFs, adding digital signatures to a PDF form, and much more. - View multiple file types inside the browser — from [image files (JPG, PNG, TIFF)](https://www.nutrient.io/guides/web/viewer/images.md) to [MS Office documents](https://www.nutrient.io/guides/web/viewer.md). - Get a quick response from a dedicated support team if you encounter a challenge or issue when integrating the viewer. At Nutrient, we offer a commercial, feature-rich, and completely customizable [Angular PDF library](https://www.nutrient.io/guides/web.md) that’s easy to integrate and comes with well-documented APIs to handle advanced use cases. [Try it for free](https://www.nutrient.io/try), or [visit our demo](https://www.nutrient.io/demo/) to see it in action. For other Angular approaches, see how to build an [Angular PDF viewer with Nutrient Web SDK](https://www.nutrient.io/blog/how-to-build-an-angular-pdf-viewer/) or with [PDF.js and ngx-extended-pdf-viewer](https://www.nutrient.io/blog/how-to-build-an-angular-pdf-viewer-with-pdfjs.md). ## FAQ #### What is ng2-pdf-viewer? `ng2-pdf-viewer` is an Angular library that allows you to display PDF documents within an Angular application. #### How do you display a PDF using ng2-pdf-viewer? Add the `pdf-viewer` component in your template and specify the path to the PDF document in the `src` attribute. #### Can I customize the PDF viewer in Angular with ng2-pdf-viewer? Yes, you can customize the PDF viewer by using various input properties and events to control aspects like zoom level, page number, and enabling features such as text layers and custom navigation. #### What additional features does Nutrient offer over ng2-pdf-viewer? `Nutrient` provides an out-of-the-box UI, annotations, eSignatures, PDF editing, form filling, and more. #### How do you integrate Nutrient into an Angular project? Install `Nutrient` via `npm` or `yarn`, configure `angular.json` to include `Nutrient` assets, and initialize it in your component. --- ## Related pages - [The business case for accessibility: Five ways it drives enterprise value](/blog/5-ways-accessibility-drives-enterprise-value.md) - [Accessibility Untangled Why It Matters Guide](/blog/accessibility-untangled-why-it-matters-guide.md) - [Advanced Techniques For React Native Ui Components](/blog/advanced-techniques-for-react-native-ui-components.md) - [`vector_store` holds your indexed documents (see the multimodal RAG post](/blog/agentic-rag.md) - [Ai Document Automation Extraction To Action](/blog/ai-document-automation-extraction-to-action.md) - [Ai Legal Assistant Document Authoring](/blog/ai-legal-assistant-document-authoring.md) - [Angular File Viewer Pdf Image Office Files](/blog/angular-file-viewer-pdf-image-office-files.md) - [Auto Tagging And Document Accessibility In Dotnet Sdk](/blog/auto-tagging-and-document-accessibility-in-dotnet-sdk.md) - [Best Document Viewers](/blog/best-document-viewers.md) - [The CEO’s AI playbook: Why decision architecture beats model selection](/blog/ceo-ai-playbook-decision-architecture.md) - [1. Extract and chunk the PDF.](/blog/chat-with-pdf.md) - [Complete Guide To Pdfjs](/blog/complete-guide-to-pdfjs.md) - [Construction Document Data Extraction](/blog/construction-document-data-extraction.md) - [Convert One Drive Files To Pdf In Sharepoint](/blog/convert-one-drive-files-to-pdf-in-sharepoint.md) - [Create And Edit Pdfs In Flutter](/blog/create-and-edit-pdfs-in-flutter.md) - [Create Pdfs With React](/blog/create-pdfs-with-react.md) - [Creating A Document Scanner With Ocr In Python](/blog/creating-a-document-scanner-with-ocr-in-python.md) - [Creating And Filling Pdf Forms Programmatically In Javascript](/blog/creating-and-filling-pdf-forms-programmatically-in-javascript.md) - [The CTO’s AI playbook: Why accountability architecture beats orchestration](/blog/cto-ai-playbook-accountability-architecture.md) - [Digital Signatures](/blog/digital-signatures.md) - [Digital Workflow Automation](/blog/digital-workflow-automation.md) - [Document Ai Vs Ocr](/blog/document-ai-vs-ocr.md) - [Document Viewer](/blog/document-viewer.md) - [Document Watermarking](/blog/document-watermarking.md) - [Emerging threats: Your logging system may be an agentic threat vector](/blog/emerging-threats-your-logging-system.md) - [app.py](/blog/extract-text-from-pdf-using-python.md) - [Fillable Pdf](/blog/fillable-pdf.md) - [How To Add Digital Signature To Pdf Using React](/blog/how-to-add-digital-signature-to-pdf-using-react.md) - [How To Build A Dotnet Maui Pdf Viewer](/blog/how-to-build-a-dotnet-maui-pdf-viewer.md) - [How To Build A Flutter Pdf Viewer](/blog/how-to-build-a-flutter-pdf-viewer.md) - [or](/blog/how-to-build-a-javascript-pdf-viewer-with-pdfjs.md) - [How To Build A Javascript Pdf Viewer](/blog/how-to-build-a-javascript-pdf-viewer.md) - [or](/blog/how-to-build-a-nextjs-pdf-viewer.md) - [How To Build A Powerpoint Viewer Using Javascript](/blog/how-to-build-a-powerpoint-viewer-using-javascript.md) - [Using Yarn](/blog/how-to-build-a-react-excel-viewer.md) - [How To Build A React Native Pdf Viewer](/blog/how-to-build-a-react-native-pdf-viewer.md) - [How To Build A React Powerpoint Viewer](/blog/how-to-build-a-react-powerpoint-viewer.md) - [How To Build A Reactjs File Viewer](/blog/how-to-build-a-reactjs-file-viewer.md) - [or](/blog/how-to-build-a-reactjs-pdf-viewer-with-react-pdf.md) - [or](/blog/how-to-build-a-reactjs-pdf-viewer.md) - [How To Build A Reactjs Viewer With Pdfjs](/blog/how-to-build-a-reactjs-viewer-with-pdfjs.md) - [How To Build A Vuejs Pdf Viewer With Pdfjs](/blog/how-to-build-a-vuejs-pdf-viewer-with-pdfjs.md) - [How To Build A Vuejs Pdf Viewer](/blog/how-to-build-a-vuejs-pdf-viewer.md) - [How To Build An Android Pdf Viewer](/blog/how-to-build-an-android-pdf-viewer.md) - [How To Build An Angular Pdf Viewer With Pdfjs](/blog/how-to-build-an-angular-pdf-viewer-with-pdfjs.md) - [How To Convert Docx To Pdf Using Javascript](/blog/how-to-convert-docx-to-pdf-using-javascript.md) - [How To Convert Docx To Pdf Using Python](/blog/how-to-convert-docx-to-pdf-using-python.md) - [How To Convert Html To Pdf Using Html2pdf](/blog/how-to-convert-html-to-pdf-using-html2pdf.md) - [or](/blog/how-to-convert-html-to-pdf-using-react.md) - [or](/blog/how-to-convert-html-to-pdf-using-wkhtmltopdf-and-python.md) - [How To Convert Word To Pdf In Nodejs](/blog/how-to-convert-word-to-pdf-in-nodejs.md) - [or](/blog/how-to-create-a-react-js-signature-pad.md) - [How To Create Pdfs With React To Pdf](/blog/how-to-create-pdfs-with-react-to-pdf.md) - [How To Edit Pdfs Using Ios Pdf Library](/blog/how-to-edit-pdfs-using-ios-pdf-library.md) - [How To Embed A Pdf Viewer In Your Website](/blog/how-to-embed-a-pdf-viewer-in-your-website.md) - [How To Extract Tables From Pdf And Images](/blog/how-to-extract-tables-from-pdf-and-images.md) - [How To Generate Pdf From Html With Nodejs](/blog/how-to-generate-pdf-from-html-with-nodejs.md) - [base_url tells WeasyPrint where to resolve relative asset paths](/blog/how-to-generate-pdf-reports-from-html-in-python.md) - [Open an image.](/blog/how-to-use-tesseract-ocr-in-python.md) - [From an HTML string.](/blog/html-in-pdf-format.md) - [Javascript Pdf Libraries](/blog/javascript-pdf-libraries.md) - [Linearized Pdf](/blog/linearized-pdf.md) - [Swift Package Manager](/blog/mobile-pdf-sdk.md) - [`elements` come from your document parser — each has a type and content.](/blog/multimodal-rag.md) - [Nutrient Vs Conga Composer](/blog/nutrient-vs-conga-composer.md) - [Online Document Viewer](/blog/online-document-viewer.md) - [Open Pdf In Your Web App](/blog/open-pdf-in-your-web-app.md) - [Building WCAG 2.2, Section 508, and PDF/UA-compliant PDFs with an SDK](/blog/pdf-accessibility.md) - [Pdf Extraction Benchmark Opendataloader Bench](/blog/pdf-extraction-benchmark-opendataloader-bench.md) - [Pdf Extraction Document Case Studies](/blog/pdf-extraction-document-case-studies.md) - [Pdf Page Labels](/blog/pdf-page-labels.md) - [Pdf Sdk Compliance Security Checklist](/blog/pdf-sdk-compliance-security-checklist.md) - [Pdf Sdk Performance Benchmark](/blog/pdf-sdk-performance-benchmark.md) - [Pdf Ua Compliance Guide](/blog/pdf-ua-compliance-guide.md) - [Pdfjs Advanced Loading Streaming Workers](/blog/pdfjs-advanced-loading-streaming-workers.md) - [Pdfjs Annotation Editor Layer](/blog/pdfjs-annotation-editor-layer.md) - [Pdfjs Area Annotations Canvas Capture](/blog/pdfjs-area-annotations-canvas-capture.md) - [Pdfjs Coordinate Systems Pdf To Screen](/blog/pdfjs-coordinate-systems-pdf-to-screen.md) - [Pdfjs Document Outline Bookmarks Metadata](/blog/pdfjs-document-outline-bookmarks-metadata.md) - [Pdfjs Eventbus Guide](/blog/pdfjs-eventbus-guide.md) - [Pdfjs Limitations Commercial Upgrade](/blog/pdfjs-limitations-commercial-upgrade.md) - [Pdfjs Native Annotation Layer Forms](/blog/pdfjs-native-annotation-layer-forms.md) - [Pdfjs Navigation Zoom Rotation](/blog/pdfjs-navigation-zoom-rotation.md) - [Pdfjs Pdf Page Manipulation Pdf Lib](/blog/pdfjs-pdf-page-manipulation-pdf-lib.md) - [Pdfjs React Viewer Setup](/blog/pdfjs-react-viewer-setup.md) - [Pdfjs Rendering Overlays React Portals](/blog/pdfjs-rendering-overlays-react-portals.md) - [Pdfjs Server Side Text Extraction](/blog/pdfjs-server-side-text-extraction.md) - [Pdfjs Sticky Note Annotations](/blog/pdfjs-sticky-note-annotations.md) - [Pdfjs Text Highlight Annotations](/blog/pdfjs-text-highlight-annotations.md) - [Pdfjs Text Search Pdffindcontroller](/blog/pdfjs-text-search-pdffindcontroller.md) - [Pdfjs Thumbnail Sidebar](/blog/pdfjs-thumbnail-sidebar.md) - [Process Flows](/blog/process-flows.md) - [React Native Pdf Annotation](/blog/react-native-pdf-annotation.md) - [or](/blog/sample-blog-updated.md) - [Add DWS MCP Server to your Claude Code project.](/blog/teaching-llms-to-read-pdfs.md) - [Open an image file.](/blog/tesseract-python-guide.md) - [Top 5 Javascript Pdf Viewers](/blog/top-5-javascript-pdf-viewers.md) - [Convert an HTML file to PDF.](/blog/top-ten-ways-to-convert-html-to-pdf.md) - [Vector Pdf](/blog/vector-pdf.md) - [Wcag2 Accessibility Requirements Documents](/blog/wcag2-accessibility-requirements-documents.md) - [Web Sdk Is Now Headless](/blog/web-sdk-is-now-headless.md) - [What Are Annotations](/blog/what-are-annotations.md) - [What Is A Vpat](/blog/what-is-a-vpat.md) - [What Is Document Processing](/blog/what-is-document-processing.md) - [What Is Pdf Ua](/blog/what-is-pdf-ua.md) - [Why Pdfium Is A Trusted Platform For Pdf Rendering](/blog/why-pdfium-is-a-trusted-platform-for-pdf-rendering.md) - [Why Your Ai Agent Hallucinates Pdf Table Data](/blog/why-your-ai-agent-hallucinates-pdf-table-data.md)