How to get started with Syncfusion Angular 7 PdfViewer component?

4 mins read

Essential JS 2 PDF Viewer

Syncfusion Angular UI (Essential JS 2) is a collection of modern TypeScript-based true Angular components. The PDF Viewer component is developed from the ground up to be lightweight, responsive, modular, and touch-friendly.

Project Prerequisites

Make sure that you have compatible versions of TypeScript and Angular on your machine before starting to work on this project.

Angular 7+
TypeScript 2.6+

You can use the Angular CLI to setup your Angular applications.

To install the PDF Viewer component, use the following command:

npm install -g @angular/cli@7.0.5

Create an Angular application

Start a new Angular application using the Angular CLI command as follows.

ng new my-app
cd my-app

Adding Syncfusion PDF Viewer package

All the available Essential JS 2 packages are published in npmjs.com registry.

To install PDF Viewer component, use the following command.

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

Note:

The --save flag will instruct npm to include the PDF Viewer package inside the dependencies section of the package.json.

Registering PDF Viewer module

Import PDF Viewer module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-pdfviewer[src/app/app.module.ts].

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Imported Syncfusion PDF Viewer component from the PDF Viewer package
import {
  PdfViewerComponent
} from '@syncfusion/ej2-angular-pdfviewer';

@NgModule({
  declarations: [
    AppComponent,
    // Registering EJ2 PDF Viewer component
    PdfViewerComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding CSS reference

The following CSS files are available in ../node_modules/@syncfusion package folder. These can be referenced in [src/styles.css] using the following code:

CSS

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

Add PDF Viewer Component

Modify the template in [src/app/app.component.ts] file to render the PDF Viewer component. Add the Angular PDF Viewer by using the <ejs-pdfviewer> selector in the template section of the app.component.ts file.

import { Component } from '@angular/core';
import {
  LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
  ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService
} from '@syncfusion/ej2-angular-pdfviewer';

@Component({
  selector: 'app-root',
  template: '<div>
<ejs-pdfviewer id="pdfViewer" [serviceUrl]="service" [documentPath]="document" style="height:640px;display:block"></ejs-pdfviewer>
</div>',
											   
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
  title = 'syncfusion-pdfviewer-angular-app';
  // Set the service URL for PdfViewerControl
  public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
  // Default document to render in the PdfViewerControl
  public document = 'PDF_Succinctly.pdf';
}

Note:

For PDF Viewer service creation, follow the steps provided in the link link below.

Sample link:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdfviewer-641671106

UG Link: https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started.html

Conclusion.

I hope you enjoyed learning about how to get started with Syncfusion Angular 7 PdfViewer component.

Did you find this information helpful?

Yes

Comments