How to get started easily with Angular 11 PDF Viewer?
In Syncfusion Angular UI (Essential JS 2), it is a collection of modern TypeScript-based true Angular components. The Angular PDF Viewer component is developed from the ground up to be lightweight, responsive, modular, and touch-friendly.
Pre-requisites
Make sure that you have the compatible versions of TypeScript and Angular on your machine before starting to work on this project.
You can use the Angular CLI to set up 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 the 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 the PDF Viewer module into the 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 { }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';
Modify the template in [src/app/app.component.ts] file to render the PDF Viewer component. Add the Angular PDF Viewer by using the selector in the 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 the link.
UG link: https://ej2.syncfusion.com/angular/documentation/pdfviewer/getting-started
Conclusion
I hope you enjoyed learning about how to get started easily with Angular 11 PDF Viewer.
You can refer to our Angular PDF Viewer feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Angular PDF Viewer example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
