Different Ways to display pdf in Angular

Hi, There
I spend couple of hours to find out the best way of a display pdf file on the angular website in my previous project. Here, I would like to share the code and the different available options to display pdf in an angular project. In later days, I will write another post on how to easily display binary/blob pdf file in angular with code snippets.

1. Using ng2-pdf-viewer Library

a) Install ng2-pdf-viewer from terminal

npm install ng2-pdf-viewer --save 

b) Add below code in pdfview.component.html

<pdf-viewer [src]="pdfsrc" [original-size]="false" [render-text]="true" style="display:block">
</pdf-viewer>

c) Add below code in pdfview.component.ts

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

@Component({
  selector: 'app-pdfview',
  templateUrl: './pdfview.component.html',
  styleUrls: ['./pdfview.component.scss']
})
export class PdfviewComponent implements OnInit {

  pdfsrc: any;
  constructor() { }

  ngOnInit() {
 
this.pdfsrc = 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf';
 
 }
}

3) Don’t forget to add PdfViewerModule in app.modules.ts

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

@NgModule({

imports: [
PdfViewerModule
]
});

For more details please visit https://www.npmjs.com/package/ng2-pdf-viewer

2) Using ngx-extended-pdf-viewer

a) Install ngx-extended-pdf-viewer from terminal

npm i ngx-extended-pdf-viewer --save

b) Add below code in angular.json or angular-cli.json

"assets": [
    "src/favicon.ico",
    "src/assets",
    {
      "glob": "**/*",
      "input": "dist/ngx-extended-pdf-viewer/assets/",
      "output": "/assets/"
    }
  ],
  "scripts": []

c) Add below code in pdfview.component.html

<ngx-extended-pdf-viewer [src]="pdfsrc" backgroundColor="#ffffff" [delayFirstView]="1000" [height]="'500px'"
                         [useBrowserLocale]="true">
</ngx-extended-pdf-viewer>

c) Add below code in pdfview.component.ts file

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

@Component({
  selector: 'app-pdfview',
  templateUrl: './pdfview.component.html',
  styleUrls: ['./pdfview.component.scss']
})
export class PdfviewComponent implements OnInit {

  pdfsrc: any;
  constructor() { }

  ngOnInit() {
 
this.pdfsrc = 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf';
 
 }
}

d) Don’t forget to add NgxExtendedPdfViewerModule in app.module.ts

import {NgxExtendedPdfViewerModule} from 'ngx-extended-pdf-viewer';

@NgModule({

imports: [
    NgxExtendedPdfViewerModule,

]
});

For more details please visit https://www.npmjs.com/package/ngx-extended-pdf-viewer

3) By using HTML embed tag

a) Add below code in pdfview.component.html

  <embed [src]="pdfsrc" width="500" height="375" type="application/pdf">

b) Add below code in pdfview.component.ts file

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

@Component({
  selector: 'app-pdfview',
  templateUrl: './pdfview.component.html',
  styleUrls: ['./pdfview.component.scss']
})
export class PdfviewComponent implements OnInit {

  pdfsrc: any;
  constructor() { }

  ngOnInit() {
 
this.pdfsrc = 'https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf';
 
 }
}

Don’t hesitate to add any comments/questions in the comment section below.