This section explains the steps required to create a simple Essential JS 2 PDF Viewer and demonstrates the basic usage of the PDF Viewer control in a Angular CLI application.
You can use the Angular CLI
to setup your Angular applications.
To install Angular CLI globally use the following command.
npm install -g @angular/cli
N> Use the command npm install —save @angular/cli@12.0.2 to install the latest Angular CLI version 12.0.2
Start a new Angular application using the Angular CLI command as follows.
ng new my-app
cd my-app
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 thepackage.json
.
Import PDF Viewer module into Angular application(app.module.ts) from the package @syncfusion/ej2-angular-pdfviewer
[src/app/app.module.ts].
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the PdfViewer Module for the PDF Viewer component
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService } from '@syncfusion/ej2-angular-pdfviewer';
import { AppComponent } from './app.component';
@NgModule({
//declaration of ej2-angular-pdfviewer module into NgModule
imports: [ BrowserModule, PdfViewerModule ],
declarations: [ AppComponent ],
bootstrap: [AppComponent],
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppModule { }
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-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-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-pdfviewer/styles/material.css';
@import '../node_modules/@syncfusion/ej2-notifications/styles/material.css';
Add the following lines in the index.html
file to refer the css style.
<link href="//cdn.syncfusion.com/ej2/20.1.58/material.css" rel="stylesheet" />
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, OnInit } from '@angular/core';
import {
LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-root',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent implements OnInit {
public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
public document = 'PDF_Succinctly.pdf';
ngOnInit(): void {
}
}
For PDF Viewer serviceUrl creation, follow the steps provided in the link
View web service sample in GitHub
Use the following command to run the application in browser.
ng serve --open
The output will appear as follows.
import { Component, OnInit } from '@angular/core';
import {
LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService
} from '@syncfusion/ej2-angular-pdfviewer';
@Component({
selector: 'app-container',
// specifies the template string for the PDF Viewer component
template: `<div class="content-wrapper">
<ejs-pdfviewer id="pdfViewer" [serviceUrl]='service' [documentPath]='document' style="height:640px;display:block"></ejs-pdfviewer>
</div>`,
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService, AnnotationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppComponent implements OnInit {
public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
public document = 'PDF_Succinctly.pdf';
ngOnInit(): void {
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PdfViewerModule, LinkAnnotationService, BookmarkViewService, MagnificationService, ThumbnailViewService,
ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService } from '@syncfusion/ej2-angular-pdfviewer';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule , PdfViewerModule ],
declarations: [ AppComponent ],
bootstrap: [AppComponent],
providers: [LinkAnnotationService, BookmarkViewService, MagnificationService,
ThumbnailViewService, ToolbarService, NavigationService, TextSearchService, TextSelectionService, PrintService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Find the Angular Sample