> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/libraries-and-frameworks/angular.md).

# Build an Angular PDF viewer with Apryse WebViewer SDK

Create an Angular PDF viewer and editor with Apryse WebViewer. Learn how to integrate the SDK into your Svelte apps and render PDFs in the viewer UI.

This guide shows how to build an Angular PDF viewer using the Apryse [WebViewer SDK](/web/what-is-webviewer/overview.md). You'll learn how to integrate the SDK into an [Angular](https://angular.dev/overview) application to render, view, and interact with PDF documents using the WebViewer UI.

You can also download a ready-to-use [GitHub sample](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-angular) to get started quickly, or explore the interactive [Showcase demo](https://showcase.apryse.com/) to see WebViewer's full capabilities in action.

## Prerequisites

This guide assumes basic familiarity with Angular development. Before you start:

* Install [Node.js](https://nodejs.org/en/download) and npm. See the [Angular documentation](https://angular.dev/installation#prerequisites) for version details.
* Install [Visual Studio Code](https://code.visualstudio.com/Download) or another code editor to develop and debug your code.
* Get your Apryse trial key.

{% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %}

## 1. Create an Angular project

In this section, you’ll create a new Angular application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have an Angular app, skip this and continue to [Install WebViewer](#2-install-webviewer).

1. In your terminal, install the Angular CLI globally so you can create and manage Angular projects:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm install -g @angular/cli
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Navigate to the directory where you want to create the project.
3. Create a new `webviewer-angular` project using a minimal setup:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
ng new webviewer-angular --style=css --ssr=false --defaults
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Info**

Flags are used to skip prompts during project configuration. The setup sets the CSS stylesheet format, disables server-side rendering (SSR) and prerendering, and accepts all defaults. Select different options if preferred.
{% endhint %}

4. Navigate to your new Angular project directory and install dependencies:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
cd webviewer-angular
npm install
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 2. Install WebViewer

Next, install the Apryse WebViewer SDK using npm. This command adds the [WebViewer package](https://www.npmjs.com/package/@pdftron/webviewer) to your project, allowing you to integrate the PDF viewer and editor into your Angular application.

After navigating to your `webviewer-angular` project directory, run the following command to install WebViewer:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npm i @pdftron/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 3. Copy WebViewer assets

WebViewer requires access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. These assets are located in `node_modules/@pdftron/webviewer/public`. To ensure they’re served correctly, make them publicly accessible in your Angular application by configuring the `assets` array in `angular.json`. In this section, you’ll copy the required WebViewer assets to a location that Angular serves automatically. For more, see [Copying WebViewer static assets](/web/get-started/copy-assets.md).

1. Open your project in Visual Studio Code and go to the `angular.json` file.
2. In the `angular.json` file, update the `assets` array to include the following and save:

{% tabs %}
{% tab title="JSON" %}
{% code title="angular.json" lineNumbers="true" %}

```json
{
  // ...
  "assets": [
    // ...other assets,
    { 
      "glob": "**/*",
      "input": "./node_modules/@pdftron/webviewer/public",
      "output": "/lib/webviewer"
    }
  ],
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

The `output` value creates a new set of folders and moves the static assets to the `lib/webviewer` folder.

{% hint style="info" %}
**Info**

You can add multiple entries to the `assets` array, each with its own `input` path. Don't modify or remove the default entries in `angular.json`. For example, keep entries such as `{"glob": "**/*", "input": "public"}`.
{% endhint %}

## 4. Create the PDF viewer

In this section, you'll add WebViewer to your Angular app by creating a component and initializing the viewer. This mounts the WebViewer UI and loads a document in your application.

1. Create a `webviewer` folder in your project's `src` directory:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes mkdirp src/webviewer
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Create `webviewer.ts` and `webviewer.html` files in the `webviewer` folder:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes shx touch src/webviewer/webviewer.ts
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
npx --yes shx touch src/webviewer/webviewer.html
```

{% endcode %}
{% endtab %}
{% endtabs %}

3. In Visual Studio Code, add this code to the `webviewer.ts` file and save:

<pre class="language-ts" data-line-numbers><code class="lang-ts">import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import WebViewer from '@pdftron/webviewer';

@Component({
  selector: 'webviewer',
  templateUrl: './webviewer.html',
  standalone: true,
}) 

export class WebViewerComponent implements AfterViewInit {
  // Reference to DOM element where WebViewer will be mounted
  @ViewChild('viewer') viewer!: ElementRef;
  
  ngAfterViewInit(): void {
    WebViewer(
      {
        // Path to copied WebViewer static assets
        path: '../../lib/webviewer',
        // Replace with your Apryse license key
        licenseKey: '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>',
        // Document to load when WebViewer initializes
        initialDoc: 'https://apryse.s3.amazonaws.com/public/files/samples/WebviewerDemoDoc.pdf',
      },
      // Element where WebViewer is mounted
      this.viewer.nativeElement
    ).then(instance => {
      // WebViewer APIs are available via the instance
    });
  }
}
</code></pre>

{% hint style="info" %}
**Info**

If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets.
{% endhint %}

4. Add this code to the `webviewer.html` file and save:

{% tabs %}
{% tab title="HTML" %}
{% code title="src/webviewer/webviewer.html" lineNumbers="true" %}

```html
<div #viewer class="viewer" style="height: 100vh; width: 100%; margin: 0 auto;"></div>
```

{% endcode %}
{% endtab %}
{% endtabs %}

5. Replace the `src/app/app.ts` file with the following and save:

{% tabs %}
{% tab title="TypeScript" %}
{% code title="src/app/app.ts" lineNumbers="true" %}

```ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
// Import WebViewer component created earlier
import { WebViewerComponent } from '../webviewer/webviewer';

@Component({
  selector: 'app-root',
  standalone: true,
  // Make WebViewer available in the root component
  imports: [RouterOutlet, WebViewerComponent],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App { 
  // Replace with your Angular project name 
  title = 'webviewer-angular';
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

6. Replace the `src/app/app.html` file with the following and save:

{% tabs %}
{% tab title="HTML" %}
{% code title="src/app/app.html" lineNumbers="true" %}

```html
<main class="main">
  <webviewer />
</main>
```

{% endcode %}
{% endtab %}
{% endtabs %}

## 5. Verify your output

You can now load and display a PDF document in the WebViewer UI. Run your Angular application to launch WebViewer and see the PDF in your browser.

1. From your project directory, run the following command to start the application:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
ng serve
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Info**

You may get a warning message in the command line, as the project runs, that you're not using `RouterOutlet` correctly. You can ignore the warning.
{% endhint %}

A successful output looks similar to:

{% tabs %}
{% tab title="Shell" %}
{% code lineNumbers="true" %}

```shell
Application bundle generation complete. [0.643 seconds]

Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
```

{% endcode %}
{% endtab %}
{% endtabs %}

2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document.

## Get started video

In this 5-minute video, learn how to install and integrate the Apryse WebViewer SDK into an Angular project.

{% embed url="<https://www.youtube.com/embed/mOuIYRM4Nps?si=dxYysZ9qyrEuOHEQ>" %}
Integrate the WebViewer SDK in an Angular (v20+) application.
{% endembed %}

## Next steps

<a href="/web/what-is-webviewer/usage.md" class="button primary">Usage</a><a href="/web/get-started/guides.md" class="button primary">Guides</a><a href="/web/get-started/samples.md" class="button primary">Samples</a><a href="https://sdk.apryse.com/api/web/index.html" class="button primary">API docs</a>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/get-started/libraries-and-frameworks/angular.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.