Syncfusion AI Assistant

How can I help you?

Getting started with Angular Standalone PDF Viewer

24 Apr 20263 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.

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

Prerequisites

Ensure that your system 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 Angular 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
  • Validate that your server has been configured to utilize the Content-Type: application/wasm MIME type. Additional information can be found in the Troubleshooting section.

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 document, only the PdfViewerModule is required.

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 {

  // Specifies the path or Base64 string of the PDF document to be loaded.
  // You can provide a remote URL or a local file from the assets folder.
  public documentPath: string =
    'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';

  // Specifies the path to the PDFium resource files required by the PDF Viewer.
  // This points to a CDN-hosted ej2-pdfviewer-lib folder.
  public resourcesUrl: string =
    'https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib';
}

Run the application

Run the application using the Angular CLI:

ng serve --open

The PDF document will be rendered in the browser.

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: