Can PDF viewer be used in Angular 6 application?
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
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: https://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: https://www.syncfusion.com/downloads/support/directtrac/general/ze/PdfViewer_Angular6869299007
UG link: https://help.syncfusion.com/angular/pdfviewer/getting-started