Angular App

--- title: "Add PDF functionality with Angular" canonical_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/angular/" md_url: "https://www.nutrient.io/sdk/web/getting-started/other-frameworks/angular.md" last_updated: "2026-05-30T02:20:01.493Z" description: "Learn how to integrate Nutrient Web SDK into your Angular application. Step-by-step guide for adding PDF viewing, editing, and annotation features." --- # Add PDF functionality with Angular Nutrient Web SDK is a JavaScript PDF library for viewing, annotating, and editing PDFs directly in the browser. Use it to add PDF capabilities to any web app. This guide walks you through the steps to integrate Nutrient Web SDK into your project. By the end, you’ll be able to render a PDF document in the user interface (UI). **Test without installing** You can test the SDK capabilities in our playground. [Read more](https://nutrient.io/demo/sandbox) **Jump to example** Prefer to jump straight to code? View the example repo on GitHub. [Read more](https://github.com/PSPDFKit/nutrient-examples/tree/main/examples/angular) ## Installation You can load Nutrient Web SDK directly from Nutrient’s content delivery network (CDN). Nutrient maintains the CDN for customers, and it’s our recommended way to get started. For more control and flexibility, use the local installation option. #### Note: Creating a new project (optional) If you don’t yet have an Angular project set up, create one with: ```sh npx @angular/cli@latest new nutrient-angular-example ``` ### CDN installation **Steps:** 1. Add the following script tag in your `index.html` file: ```html // src/index.html Angular App ``` 2. You’re now ready to use Nutrient Web SDK and reference `window.NutrientViewer` in the client-side code. ### Install via package manager **Steps:** 1. Add the Nutrient Web SDK (`@nutrient-sdk/viewer`) dependency: ```bash npm install @nutrient-sdk/viewer # or yarn add @nutrient-sdk/viewer # or pnpm install @nutrient-sdk/viewer ``` 2. If you tried CDN installation first, make sure to remove the script tag: ```html ``` 3. You’re now ready to use Nutrient Web SDK locally in your Angular project. ## Rendering a PDF ### CDN installation **Steps:** 1. Generate a new PDF viewer component: ```sh ng generate component pdf-viewer ``` 2. Replace the contents of `src/app/pdf-viewer/pdf-viewer.component.html` with the following: ```html

``` 3. Replace the contents of `src/app/pdf-viewer/pdf-viewer.component.ts` with the following: ```ts import { Component, OnInit } from "@angular/core"; @Component({ selector: "pdf-viewer", templateUrl: "./pdf-viewer.component.html", styleUrls: ["./pdf-viewer.component.css"], standalone: true, }) export class PdfViewerComponent implements OnInit { ngOnInit(): void { const { NutrientViewer } = window as any; if (NutrientViewer) { NutrientViewer.load({ document: "/assets/document.pdf", container: "#nutrient-container", }).then((instance: any) => { // For the sake of this demo, store the Nutrient instance // on the global object so that you can open the dev tools and // play with the Nutrient API. (window as any).instance = instance; }); } } } ``` 4. Update the component where you want to use the PDF viewer — for example, `src/app/app.component.ts` — to import the `PdfViewerComponent`: ```ts import { Component } from "@angular/core"; import { RouterOutlet } from "@angular/router"; import { PdfViewerComponent } from "./pdf-viewer/pdf-viewer.component"; @Component({ selector: "app-root", imports: [RouterOutlet, PdfViewerComponent], templateUrl: "./app.component.html", styleUrl: "./app.component.css", }) export class AppComponent { title = "angular"; } ``` 5. Add the `pdf-viewer` to the page where you want to display it — for example, `src/app/app.component.html`: ```html ``` 6. Start the development server: ```bash npm run dev # or yarn dev # or pnpm dev ``` 7. You’ll see the PDF rendered in the Nutrient Web SDK user interface (UI). ### Install via package manager **Steps:** 1. Generate a new PDF viewer component: ```sh ng generate component pdf-viewer ``` 2. Replace the contents of `src/app/pdf-viewer/pdf-viewer.component.html` with the following: ```html

``` 3. Replace the contents of `src/app/pdf-viewer/pdf-viewer.component.ts` with the following: ```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({ document: "/assets/document.pdf", container: "#nutrient-container", useCDN: true, }).then((instance) => { // For the sake of this demo, store the Nutrient instance // on the global object so that you can open the dev tools and // play with the Nutrient API. (window as any).instance = instance; }); } } ``` > **Note:** Adding `useCDN: true` will load the SDK assets from the CDN if `baseUrl` isn’t provided. This flag was introduced in version 1.9.0. If your setup relies on the previous behavior of autodetecting the assets without `baseUrl`, you can omit this flag for now, but be aware that this behavior is deprecated. In future versions, loading from CDN will become a default when `baseUrl` isn’t explicitly provided. `useCDN: true` has no effect if `baseUrl` is set. **Optional**: If you decide to self-host the Nutrient Web SDK assets as [described in this guide](https://www.nutrient.io/guides/web/self-host-assets.md), make sure to provide a `baseUrl` in your configuration, as shown below: ```ts NutrientViewer.load({ document: "/assets/document.pdf", useCDN: true, container: "#nutrient-container", baseUrl: `${location.protocol}//${location.host}/${ (window as any).PUBLIC_URL?? "" // Usually empty for Angular, but supports custom deployments. }`, }); ``` 4. Update the component where you want to use the PDF viewer — for example, `src/app/app.component.ts` — to import the `PdfViewerComponent`: ```ts import { Component } from "@angular/core"; import { RouterOutlet } from "@angular/router"; import { PdfViewerComponent } from "./pdf-viewer/pdf-viewer.component"; @Component({ selector: "app-root", imports: [RouterOutlet, PdfViewerComponent], templateUrl: "./app.component.html", styleUrl: "./app.component.css", }) export class AppComponent { title = "angular"; } ``` 5. Add the `pdf-viewer` to the page where you want to display it — for example, `src/app/app.component.html`: ```html ``` 6. Start the development server: ```bash npm run dev # or yarn dev # or pnpm dev ``` ### Optimizing load performance If your app doesn't open a PDF immediately — for example, the user navigates to a viewer on a different page — call [`NutrientViewer.preloadWorker()`](https://www.nutrient.io/api/web/functions/NutrientViewer.preloadWorker.html) early in your app to fetch and compile the WebAssembly artifacts in the background. When `NutrientViewer.load()` runs later, it can start rendering without waiting for them. ```js // Call early — for example, on app init or after login. NutrientViewer.preloadWorker(); ``` Refer to the [performance best practices](https://www.nutrient.io/guides/web/best-practices/performance.md) guide for more optimization techniques. ## Troubleshooting If you encounter issues, refer to the [common issues](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) guide. > **Note for developers using AI coding assistants**: To get accurate troubleshooting help, copy the content from the [troubleshooting](https://www.nutrient.io/guides/web/troubleshooting/common-issues.md) guide and include it in your prompt, along with your specific error. **Test without installing** You can test the SDK capabilities in our playground. [Read more](https://nutrient.io/demo/sandbox/) **View example** Prefer to jump straight into code? View the example repo on GitHub. [Read more](https://github.com/PSPDFKit/nutrient-examples/tree/main/examples/angular) --- ## Related pages - [Add PDF functionality with Electron](/sdk/web/getting-started/other-frameworks/electron.md) - [Add PDF viewing and editing to Vue applications](/sdk/web/getting-started/other-frameworks/vue.md) - [Add PDF functionality with Svelte](/sdk/web/getting-started/other-frameworks/svelte.md) - [Add PDF functionality with JavaScript + Vite](/sdk/web/getting-started/other-frameworks/javascript.md) - [Add PDF functionality with Flutter](/sdk/web/getting-started/other-frameworks/flutter.md) - [Add PDF functionality with Blazor](/sdk/web/getting-started/other-frameworks/blazor.md) - [Add PDF functionality with jQuery](/sdk/web/getting-started/other-frameworks/jquery.md) - [Add PDF functionality with PWA](/sdk/web/getting-started/other-frameworks/pwa.md) - [Add PDF functionality with PHP](/sdk/web/getting-started/other-frameworks/php.md) - [Add PDF functionality with Nuxt](/sdk/web/getting-started/other-frameworks/nuxt.md) - [Add PDF functionality with ASP.NET](/sdk/web/getting-started/other-frameworks/aspnet.md) - [Add PDF functionality with Laravel](/sdk/web/getting-started/other-frameworks/laravel.md)