How to Create PDF Viewer in Angular 12 with NG2 PDF Viewer

A comprehensive guide on implementing PDF viewer in Angular 12 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 12 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.