PDF viewer integration with Example in Angular


If you require to visually perceive an example of angular 11/10 ng2-pdf-viewer example. i would relish apportioning with your angular 11/10 pdf viewer example. Here you will learn angular 11/10 pdf viewer and editor. it's a simple example of angular 11/10 ng2-pdf-viewer print.

In this example, we will utilize ng2-pdf-viewer npm package to pdf file viewer in angular 11 application. we will simply install that ng2-pdf-viewer npm package and use the PdfViewerModule module to engender code.

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install ng2-pdf-viewer npm Package

Now in this step, we need to just install ng2-pdf-viewer in our angular application. so let's add as like bellow:

npm install ng2-pdf-viewer --save

Step 3: Import PdfViewerModule

we will import PdfViewerModule module as like bellow code:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { PdfViewerModule } from 'ng2-pdf-viewer';
  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

Step 4: Update Ts File

here, we need to update ts file as like bellow:


import { Component } from '@angular/core';
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
    pdfFilePath = "";

Step 5: Update HTML File

here, we need to update html file as like bellow code:


<h1>Angular PDF File Viewer Example - HackTheStuff</h1>
<pdf-viewer [src]="pdfFilePath" 
              style="display: block;"

i hope it will be help you.