How to get started easily with Syncfusion Angular 8 PdfViewer?
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 on your machine before starting to work on this project.
- Angular 8+
- TypeScript 3.4+
You can use the Angular CLI to set up your Angular applications.
To install Angular CLI, use the following command:
npm install -g @angular/[email protected]
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 the PDF Viewer component, use the following command:
npm install @syncfusion/ej2-angular-pdfviewer --save
The `--save` flag will instruct NPM to include the PDF Viewer package inside the dependencies section of the `package.json` file.
Registering PDF Viewer module
Import the PDF Viewer module into the 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 { AppComponent } from './app.component';
// Importing 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
],
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]` 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.
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 PdfViewerControl
public service = 'https://ej2services.syncfusion.com/production/web-services/api/pdfviewer';
// Default document to render in the PdfViewerControl
public document = 'PDF_Succinctly.pdf';
}
For PDF Viewer service creation, follow the steps provided in the link
Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum. We are happy to assist you!
Conclusion:
I hope you enjoyed learning about how to get started easily with Syncfusion Angular 8 PdfViewer.
