Posted on

Angular PDF Viewer Component

You may come over a requirement to view PDF within your Angular 5+ application. Building that from scratch might be a time and effort consuming task. Thanks to ng2-pdf-viewr component, it is providing the developers with a ready made component that you can import into your Angular project and start using it in very easy way.

In my case scenario, The PDF Viewer latest version (7.0.1) didn’t work and it was giving me compilation issues whenever I’m try to compile my application. So I had to use an older version in my Angular project (I used version 6.4.1). By using the 6.4.1 version, I overcome the compilation issue.

I order to use the ng2-pdf-viewer, it is basically consist of few steps:

  • Install the component to be part of your project
npm i ng2-pdf-viewer@6.4.1  --save
  • Compile your application to make sure new component will be compiled successfully
  • Add PDF Viewer module to your module class
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

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

@NgModule({
  imports: [BrowserModule, PdfViewerModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})

class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule);
  • Add PDF Viewer html tag to your html page and make sure the pdf URL is pointing to a valid pdf file.
import { Component } from '@angular/core';

@Component({
  selector: 'my-poc-app',
  template: `
  <pdf-viewer [src]="pdfSrc"  style="display: block;" ></pdf-viewer>
  `
})
export class MyPOCComponent {
  pdfSrc = "https://blog.smartdigitizers.com/wp-content/uploads/TestPDFFile.pdf";
}

References:

https://www.npmjs.com/package/ng2-pdf-viewer/v/6.4.1
https://www.npmjs.com/package/ng2-pdf-viewer