Syncfusion AI Assistant

How can I help you?

Getting started with Angular Standalone PDF Viewer

22 May 20264 minutes to read

This guide explains how to create a simple Angular Standalone PDF Viewer application and demonstrates the basic usage of the Syncfusion PDF Viewer component.

Prerequisites

Ensure that your system meets the Syncfusion Angular system requirements.

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.

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

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 PDF Viewer component

Add the PDF Viewer component to your Angular application to render and interact with PDF documents. The component requires the PdfViewerModule and its associated services.

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"
      [documentPath]="documentPath"
      [resourceUrl]="resourcesUrl"
      style="height:640px; display:block">
    </ejs-pdfviewer>
  `
})
export class App {
  public documentPath: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resourcesUrl: string =
    'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}

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 resourceUrl property specifies the PDFium library resources path required for PDF rendering. This example uses CDN-hosted resources. For local resources, refer to Load PDF Viewer with Local Resources.

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

Video tutorial

To get started quickly with Angular PDF Viewer, you can watch this video:

Angular version compatibility and older versions

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

For older Angular versions, refer to the following guides:

See also