Syncfusion AI Assistant

How can I help you?

Getting Started with Angular Server-Backed PDF Viewer Component

19 Jun 20265 minutes to read

This section explains how to create a simple Angular application and add the server-backed Syncfusion® Angular PDF Viewer component with the minimum required setup.

NOTE

Starting with the 2026 Vol 2 main release (June 2026), no new features will be added to the Server PDF Viewer, as almost all of the PDF Viewer functionalities are now available in the Standalone PDF Viewer. If you are currently using the server-backed PDF Viewer, please refer to the migration documentation to transition to the Standalone PDF Viewer.

Prerequisites

System requirements for Syncfusion® Angular components

Create an Angular application

Use Angular CLI to create a new Angular application, as it provides a standardized project structure, built-in testing tools, and simplified deployment.

Install Angular CLI globally, using the following command:

npm install -g @angular/cli

Create a new Angular application using the following commands:

ng new pdfviewer-app
cd pdfviewer-app

Note: When prompted during project creation, select the default options: CSS for stylesheet, No for SSR/SSG, and None for AI tools.

Install the Syncfusion® Angular PDF Viewer package

Install the Syncfusion Angular PDF Viewer package from npm:

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

Add CSS references

Add the following PDF Viewer and dependent component style references 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';

Note: Refer to the Themes topic to learn more about built-in themes and different ways to refer to themes in an Angular project.

Add the Syncfusion® Angular PDF Viewer component to the application

Add the PDF Viewer component to your Angular application in server-backed mode. In this mode, 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 {
  public serviceUrl: string =
    'https://document.syncfusion.com/web-services/pdf-viewer/api/pdfviewer';

  public documentPath: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
}

NOTE

The documentPath property sets the PDF file path to be loaded. You can provide a remote URL, Base64 string, or local file path (e.g., 'assets/sample.pdf') and the serviceUrl property specifies the server-side PDF Viewer web service endpoint for PDF rendering. The service URL shown above is for evaluation purposes only. For production, host your own PDF Viewer web service.

Run the application

Run the following command to start the Angular application:

ng serve --open

After the application starts, open the localhost URL shown in the terminal to view the Angular PDF Viewer component in the browser. The output will appear as follows:

Rendered PDF Viewer in browser

View sample in GitHub

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.

See also