Syncfusion AI Assistant

How can I help you?

Getting started with Angular PDF Viewer (Server-Backed)

27 Apr 20264 minutes to read

This guide explains how to create and run the Angular PDF Viewer in server-backed mode. In this mode, PDF rendering is handled by a server-side web service, while the Angular application acts as the client.

Note: This guide supports Angular 21 and other recent Angular versions. From Angular 19 onwards, standalone components are the default, and this documentation follows that architecture.

Prerequisites

Ensure that your development environment meets the Syncfusion Angular system requirements.

Setup Angular Environment

Install Angular CLI

Install the latest Angular CLI globally:

npm install -g @angular/cli

To install a specific version:

npm install -g @angular/[email protected]

Create an Angular application

Create a new Angular application using the CLI:

ng new my-app
cd my-app

Note: In Angular 20 and later, the CLI generates app.ts, app.html, and app.css instead of app.component.* files.

Installing Syncfusion® PDF Viewer package

Install the Syncfusion Angular PDF Viewer package from npm:

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

Adding CSS references

Add the required Syncfusion styles to the src/styles.css file:

@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-notifications/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';

Add the PDF Viewer component

To load and display a PDF using server-backed mode, only the PdfViewerModule is required. The PDF Viewer communicates with a server-side web service through the serviceUrl property.

Update src/app/app.ts as shown below:

import { Component } 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',
  standalone: true,
  imports: [PdfViewerModule],
   providers: [ LinkAnnotationService, BookmarkViewService, MagnificationService,
               ThumbnailViewService, ToolbarService, NavigationService,
               TextSearchService, TextSelectionService, PrintService,
               AnnotationService, FormDesignerService, FormFieldsService, PageOrganizerService]
  template: `
    <ejs-pdfviewer
      id="pdfViewer"
      [serviceUrl]="serviceUrl"
      [documentPath]="documentPath"
      style="height:640px; display:block">
    </ejs-pdfviewer>
  `
})
export class App {

  // Specifies the URL of the server-side PDF Viewer web service.
  // This endpoint handles PDF rendering and processing.
  public serviceUrl: string =
    'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';

  // Specifies the path or name of the PDF document to be loaded.
  public documentPath: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
}

Note: The service URL shown above is for evaluation purposes only. For production, host your own PDF Viewer web service.

Run the application

Run the Angular application using the CLI:

ng serve --open

The application will start and connect to the configured PDF Viewer web service.

Run the PDF Viewer web service

To host your own PDF Viewer service:

  1. Download the web service sample from GitHub:
    GitHub Web Service Sample
  2. Navigate to the appropriate folder based on your .NET version:
  3. Restore dependencies and run the service:
dotnet restore
dotnet run

The service will run at https://localhost:7255/pdfviewer. Configure this URL in the serviceUrl property.

Note: In server-backed mode, pdfium.js and pdfium.wasm are not required because all PDF rendering happens on the server.

Angular version compatibility and older versions

For detailed compatibility information, refer to the Angular version support matrix.

For older Angular versions, refer to the respective Angular PDF Viewer guides.

View sample in GitHub