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.
Syncfusion Feedback

How to get started easily with Syncfusion Angular 11 PDF Viewer

Platform: JavaScript - EJ 2 |
Control: PDF Viewer |
Published Date: March 13, 2021 |
Last Revised Date: March 17, 2021

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 pre-requisites

 

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

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

To install Angular CLI, use the following command.

npm install -g @angular/cli@11.2.3

 

Create an Angular application

 

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

ng new angular11-app

cd angular11-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 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 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.

@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.

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 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 link

 

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

 

ADD COMMENT
You must log in to leave a comment

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