Vite Angular in Angular PDF Viewer

25 Aug 20262 minutes to read

Overview

This guide explains how to create an Angular application powered by the Vite build system and integrate the Angular PDF Viewer using standalone components.

Prerequisites

  • Node.js: v18 or later
  • npm: v9 or later
  • Angular CLI: Latest
  • Basic knowledge of Angular standalone components

Tutorial – Create Angular Application with Vite

Step 1: Create a New Angular Application

npm install -g @angular/cli
ng new angular-vite-pdfviewer
cd angular-vite-pdfviewer

Step 2: Run the Application

Start the development server:

ng serve

Install Syncfusion Angular PDF Viewer

Step 3: Install Package

Install the Syncfusion Angular PDF Viewer package:

npm install @syncfusion/ej2-angular-pdfviewer

How-to – Integrate PDF Viewer

Step 4: Update Root Component (app.ts)

Replace the contents of src/app/app.ts with the following code:

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

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [PdfViewerModule],
  template: `
    <div class="control-section">
      <div class="content-wrapper">
        <ejs-pdfviewer
          [documentPath]="document"
          [resourceUrl]="resource"
          style="height: 640px; display: block;">
        </ejs-pdfviewer>
      </div>
    </div>
  `,
  providers: [
    LinkAnnotationService, BookmarkViewService,
    MagnificationService, ThumbnailViewService,
    ToolbarService, NavigationService,
    TextSearchService, TextSelectionService,
    PrintService, AnnotationService,
    FormFieldsService, FormDesignerService,
    PageOrganizerService
  ],
  encapsulation: ViewEncapsulation.None,
  styleUrl: './app.css'
})
export class App {
  protected readonly title = signal('pdfviewer-vite-app');

  @ViewChild('pdfviewer')
  public pdfviewerControl?: PdfViewerComponent;

  public document = 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf';
  public resource = 'https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib';
}

Step 5: Add Syncfusion Styles (app.css)

Open src/app/app.css and add the PDF Viewer theme import.

Themes for PDF Viewer can be applied using CSS or SASS files from the npm theme packages, CDN, CRG, or Theme Studio. For more information, see the themes documentation.

This guide uses the Tailwind 3 theme as an example. Install the Tailwind 3 theme package:

npm install @syncfusion/ej2-tailwind3-theme

The index.css file automatically includes all required dependent component styles for the PDF Viewer. You do not need to import individual dependency styles such as Base, Buttons, Inputs, Lists, Navigations, Popups, Dropdowns, SplitButtons, and Notifications separately.

@import '../../node_modules/@syncfusion/ej2-tailwind3-theme/styles/pdfviewer/index.css';

Step 6: Run the Application

ng serve

View Sample on GitHub

See Also