How to Implement and Display PDF Viewer in Angular 11

In this code example, we will ascertain how to implement PDF Viewer in the Angular 11 app using the npm ng2-pdf-viewer; also, we will show you how to display PDF viewer in Angular.

Recently I got a task to create a PDF viewer in Angular, and I had to search through a lot online; eventually, I got the solution after putting in tons of effort.

This article will be the ultimate elixir for those looking for an Angular PDF Viewer example.

Therefore, I will share the solution with you that I have discovered lately. We are using ng2-pdf-viewer, which lets us integrate PDF viewer in Angular quickly.

Let me give you the overview of the primary discourse; we will start with creating the angular project, add ng2-pdf-viewer library in angular, import and inject pdf viewer modules in Angular; on top of that, we will show you how to test the angular pdf viewer.

Angular 11 PDF Viewer Example

Here are the step by step methods that you have to follow to integrate PDF viewer in angular:

  • Step 1: Build Angular Project
  • Step 2: Install ng2-pdf-viewer Library
  • Step 3: Update PdfViewerModule in Main Module
  • Step 4: Implement PDF Viewer
  • Step 5: Run Angular App

Build Angular Project

To begin with angular development ensure to install Angular CLI:

npm install -g @angular/cli

Now, you can use command to install angular app:

ng new ng-demo

Head over to application directory:

cd ng new ng-demo

Install ng2-pdf-viewer Library

Theoretically, now we have to add ng2-pdf-viewer library in angular:

npm install ng2-pdf-viewer

Update PdfViewerModule in Main Module

Secondly, to take the full benefit of the package, make sure to import PdfViewerModule from ‘ng2-pdf-viewer’ package within the app.module.ts:

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 { }

Implement PDF Viewer

Use the pdf-viewer directive to implement PDF viewer. Also, add the src tag within the pdf viewer directive; it will be a PDF file path.

Open the app.component.html template and update the provided code:

<pdf-viewer [src]="doc" [render-text]="true" style="display: block;">
</pdf-viewer>

To show the PDF file, define the variable and pass the document url as suggested:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  doc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";

}

Run Angular App

Execute recommended command to run the angular app:

ng serve

Use the given below url to start and test the app:

http://localhost:4200

Angular PDF Viewer Tutorial

Conclusion

We have shown you how facile it is to add a PDF viewer in the angular platform using the ng2-pdf-viewer package. We hope you have assimilated all the mentioned above steps and achieved what you were looking for.