Syncfusion AI Assistant

How can I help you?

Getting started with Angular PDF Viewer (server-backed)

13 Feb 20268 minutes to read

This guide explains how to create the PDF Viewer component and configure its features in Angular 21 using the Essential JS 2 in server-backed mode.

Note: This guide supports Angular 21 and other recent Angular versions. For detailed compatibility with other Angular versions, please refer to the Angular version support matrix. Starting from Angular 19, standalone components are the default, and this guide reflects that architecture.

Prerequisites

Ensure your development environment meets the System Requirements for Syncfusion^® Angular UI Components.

Set up the development environment

You can use the Angular CLI to setup your Angular applications.
To install the latest Angular CLI globally use the following command.

npm install -g @angular/cli

Angular 21 Standalone Architecture: Standalone components are the default in Angular 21. This guide uses the modern standalone architecture. If you need more information about the standalone architecture, refer to the Standalone Guide.

Installing a specific version

To install a particular version of Angular CLI, use:

npm install -g @angular/[email protected]

Create an Angular application

Start a new Angular application using the Angular CLI command as follows.

ng new my-app

This command will prompt you to configure settings like enabling Angular routing and choosing a stylesheet format.

Initial_setup

By default, a CSS-based application is created. Use SCSS if required:

ng new my-app --style=scss

During project setup, when prompted for the Server-side rendering (SSR) option, choose the appropriate configuration.

Initial_setup

Select the required AI tool or ‘none’ if you do not need any AI tool.

Initial_setup

Navigate to your newly created application directory:

cd my-app

Note: In Angular 19 and below, it uses app.component.ts, app.component.html, app.component.css etc. In Angular 20+, the CLI generates a simpler structure with src/app/app.ts, app.html, and app.css (no .component. suffixes).

Installing Syncfusion^® PDF Viewer package

All the available Essential JS 2 packages are published in the npmjs.com public registry. To install PDF Viewer component, use the following command.

npm install @syncfusion/ej2-angular-pdfviewer --save

Import Syncfusion CSS styles

Add the component CSS in the ~/src/styles.css file, as shown below:

@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';

Add the PDF Viewer component

Add the Angular PDF Viewer by using <ejs-pdfviewer> selector in template section of the src/app/app.ts file to render the PDF Viewer component.

import { Component, OnInit } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService,
         MagnificationService, ThumbnailViewService, ToolbarService,
         NavigationService, TextSearchService, TextSelectionService,
         PrintService, FormDesignerService, FormFieldsService,
         AnnotationService, PageOrganizerService } from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
                <ejs-pdfviewer id="pdfViewer"
                       [serviceUrl]='service'
                       [documentPath]='document'
                       style="height:640px;display:block">
                </ejs-pdfviewer>
             </div>`,
  imports: [ PdfViewerModule ],
  providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class App implements OnInit {
  public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
  public document: string = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  ngOnInit(): void {
  }
}

NOTE

The Web API endpoint at https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer/ used in the serviceUrl property is provided for demonstration and evaluation only. For production, host a dedicated web service with the appropriate server configuration. Reusable deployment options include the GitHub web service example and the official Docker image. Standalone mode is strongly recommended for production deployments.

Run the application

Use the following command to run the application in browser.

ng serve --open

The output will appear as follows.

app.ts
main.ts
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
  ToolbarService, NavigationService,AnnotationService, TextSearchService, TextSelectionService, PrintService,FormDesignerService, FormFieldsService, PageOrganizerService} from '@syncfusion/ej2-angular-pdfviewer'
import { Component, OnInit } from '@angular/core';

@Component({
  imports: [ PdfViewerModule ],
  standalone: true,
  selector: 'app-root',
  // specifies the template string for the PDF Viewer component
  template: `<div class="content-wrapper">
  <ejs-pdfviewer 
    id="pdfViewer" 
    [serviceUrl]='service' 
    [documentPath]='document' 
    style="height:640px;display:block">
  </ejs-pdfviewer>
</div>`,
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,ThumbnailViewService, ToolbarService
    , NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService, FormDesignerService, FormFieldsService, PageOrganizerService]
})
export class AppComponent implements OnInit {
    public service = 'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';
    public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
    ngOnInit(): void {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app';
bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

For PDF Viewer serviceUrl creation, follow the steps provided in the link

Module injection

To enable additional features, inject the required modules. The following modules extend the PDF Viewer’s functionality:

LinkAnnotationService: Enables hyperlink navigation.
BookmarkViewService: Displays and navigates document bookmarks.
MagnificationService: Provides zoom in/out operations.
NavigationService: Enables page navigation.
TextSelectionService: Enables text selection.
ThumbnailViewService: Displays page thumbnails for navigation.
ToolbarService: Enables the built-in toolbar UI.
PrintService: Enables printing.
AnnotationService: Enables annotation features.
TextSearchService: Enables text search.
FormFieldsService: Enables form field support.
FormDesignerService: Enables designing and editing of form fields.
PageOrganizerService: Enables page organization features.

Inject modules using the providers property in @NgModule.

NOTE

To create a PDF Viewer serviceUrl, follow the steps in Create PDF Viewer service.

Run the PDF Viewer web service

Download the sample from the web service sample in GitHub.
Navigate to the ASP.NET Core folder and open it in a command prompt.
Navigate to the appropriate subfolder based on your .NET version:
- .NET 6.0 → PdfViewerWebService_6.0
- .NET 8.0 → PdfViewerWebService_8.0
Restore packages:

 dotnet restore

Run the web service:

 dotnet run

The PDF Viewer server instance runs at https://localhost:7255. Navigate to https://localhost:7255/pdfviewer to see the default GET response. Bind this URL to the serviceUrl property of the PDF Viewer as shown below.
```
export class App implements OnInit {
   public service = 'https://localhost:7255/pdfviewer';
   public document = 'PDF_Succinctly.pdf';
   ngOnInit(): void {
   }
```

NOTE

In server-backed mode, do not include pdfium.js and pdfium.wasm. Unlike standalone mode, the server-backed PDF Viewer renders PDFs on the server; these files and their copy steps are not required for deployment in this context.

NOTE

Refer to the Angular PDF Viewer feature tour for an overview of capabilities. Explore the Angular PDF Viewer example to see core features in action.

NOTE

For hosting the web service on Linux, include the SkiaSharp.NativeAssets.Linux package. For AWS environments, consider the NuGet packages listed below.

Amazon Web Services (AWS)	NuGet package name
AWS Lambda	SkiaSharp.NativeAssets.Linux
AWS Elastic Beanstalk	SkiaSharp.NativeAssets.Linux.NoDependencies v3.116.1

View sample in GitHub.

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

How can I help you?

Getting started with Angular PDF Viewer (server-backed)

Prerequisites

Set up the development environment

Installing a specific version

Create an Angular application

Installing Syncfusion^® PDF Viewer package

Import Syncfusion CSS styles

Add the PDF Viewer component

Run the application

Module injection

Run the PDF Viewer web service

How can I help you?

Getting started with Angular PDF Viewer (server-backed)

Prerequisites

Set up the development environment

Installing a specific version

Create an Angular application

Installing Syncfusion® PDF Viewer package

Import Syncfusion CSS styles

Add the PDF Viewer component

Run the application

Module injection

Run the PDF Viewer web service

Installing Syncfusion^® PDF Viewer package