How to Create PDF Viewer in Angular 11 with NG2 PDF Viewer
A comprehensive guide on implementing PDF viewer in Angular 11 application using the third party npm package ng2-pdf-viewer.
The ng2-pdf-viewer is an excellent package exclusively built for creating PDF viewer components in angular applications. It supports angular greater then 5 versions, it a popular module for handling PDF-related tasks in angular; this plugin offers innumerable features for pdf implementation in angular.
The ng2-pdf-viewer is an excellent package exclusively built for creating or implementing PDF viewer components in angular applications. It supports angular 5+ versions, it a popular module for handling PDF-related tasks in angular; this plugin offers innumerable features for pdf implementation in angular.
Angular 11 PDF Viewer Example
This quick tutorial will show you how to add a PDF viewer in angular using the ng2 pdf viewer package gradually:
- Step 1: Install Angular App
- Step 2: Add ng2-pdf-viewer Package
- Step 3: Register PdfViewerModule in App Module
- Step 4: Integrate PDF Viewer
- Step 5: Test Angular App
Install Angular App
First, make sure you have Angular CLI configured on your system:
npm install -g @angular/cli
Once Angular CLI is successfully installed thereafter you can create a new angular app with the suggested command:
ng new angular-pdf-viewer-example
Get into the app’s root:
cd angular-pdf-viewer-example
Add ng2-pdf-viewer Package
Next, go ahead and install the foundational ng2-pdf-viewer npm package:
npm install ng2-pdf-viewer
Register PdfViewerModule in App Module
Subsequently, you have to register PdfViewerModule to your module’s imports. After which, open and update the provided code in the app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PdfViewerModule } from 'ng2-pdf-viewer';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
PdfViewerModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Integrate PDF Viewer in Angular
Next, we will show you how to use the pdf-viewer directive in angular.
Consequently, open the angular HTML template and add the pdf-viewer tag with src and render-text property.
<h2>Integrate PDF File Viewer in Angular</h2>
<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;">
</pdf-viewer>
Move inside the angular TypeScript template, and declare the pdf file src path in a variable:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}
Test Angular App
You can use the angular schematic to start the angular project, so open terminal window and execute the command:
ng serve
Paste the following url on the browser and hit enter to test the app:
http://localhost:4200
Conclusion
Finally angular pdf tutorial is over; in this quick and immaculate tutorial we have discovered how to integrate pdf viewer in angular from scratch using npm package.