Angular Tutorials

Create PDF Viewer in Angular 13 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 { AppComponent } from './app.component';

import { PdfViewerModule } from 'ng2-pdf-viewer';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, 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"
  [original-size]="false"
  style="width: 800px; height: 600px"
></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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

23 hours ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

7 days ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago