We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Syncfusion Feedback

Can PDF viewer be used in Angular 6 application?

Platform: jQuery |
Control: ejPdfViewer |
Published Date: August 2, 2018 |
Last Revised Date: September 12, 2019

Introduction

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.

It is compatible with Angular 6.0.0.  Refer to the following UG link for prerequisites of Angular framework.

Setup Angular Environment

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

To install Angular CLI use the following command.

npm install -g @angular/cli

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 will instruct NPM to include the PDF Viewer package inside of 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].

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 PdfViewer component from PdfViewer 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. This 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 <ejs-pdfviewer> selector in template section of the app.component.ts file.

TS

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>',
   // tslint:disable-next-line:max-line-length
  providers: [LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent {
  title = 'syncfusion- pdfviewer-angular-app';
// set the service url to PdfViewer control
  public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
// default document to render in the PdfViewer control
  public document = 'PDF_Succinctly.pdf';
}
 

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app2054068837

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

Essential JS 1 PDF Viewer

PDF Viewer is compatible with Angular 6.0.0.  Refer to the following UG link for prerequisites of Angular framework.

https://help.syncfusion.com/angular/gettingstarted/overview

The following code illustrates how to integrate PDF Viewer in Angular 6 application.

HTML

<ej-pdfviewer [(serviceUrl)]="service" id="pdfviewer1" style="width:100%;min-height:600px;display:block" >
        </ej-pdfviewer>  

TS

import { Component } from '@angular/core';
 
@Component({
    selector: 'ej-app',
    templateUrl: './pdfviewer.component.html',
})
export class PdfViewerComponent {
    service: string;
    constructor() {
         this.service = 'https://js.syncfusion.com/ejServices/api/PdfViewer'; 
    }
}

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_Angular6869299007

UG linkhttps://help.syncfusion.com/angular/pdfviewer/getting-started

ADD COMMENT
You must log in to leave a comment
Comments
B Carducci
Oct 04, 2018

So what I'm not seeing is what Library in Angular 6 would I need to install via NPM in order to use the viewer.  If it's a Javascript library only, where do I get the viewer's JS libraries?

Reply
Akshaya Arivoli [Syncfusion]
Oct 08, 2018

Hi B Carducci,

 

Thank you for your update.

 

Please find the below UG link for Configuring Syncfusion npm Packages in your application.

 

https://help.syncfusion.com/js/installation-and-deployment#configuring-syncfusion-npm-packages

 

Note: The above npm package will contains the PDF viewer control.

 

Also, please find the steps to run the Angular JS application,

 

Running the App

  • Make sure you have installed the prerequisites of Angular framework.
  • Navigate to your application location
  • run npm install to install dependencies.
  • run npm start to fire up dev server.
  • open browser to http://localhost:3000
  • If you want to use other port, open package.json file, then change port in --port 3000 script and also change the port in config/webpack.dev.js.

Please try this and let us know if you have any concerns on this.

 

Regards,

Akshaya

Reply

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile