Angular 14 Render PDF Documents Using ng2-pdf-viewer Library in TypeScript

Welcome folks today in this blog post we will be using the ng2-pdf-viewer library to render pdf documents in browser using typescript. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below library using the npm command as shown below

npm i ng2-pdf-viewer

And after that you need to copy paste the below code inside the app.module.ts file as shown below

app.module.ts

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);

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);

As you can see we are importing the module and then we are adding it inside the imports array. Now we need to copy paste the code inside the app.component.ts file as shown below

app.component.ts

import { Component } from '@angular/core';
 
@Component({
  selector: 'example-app',
  template: `
  <pdf-viewer [src]="pdfSrc" 
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>
  `
})
export class AppComponent {
  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}

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

@Component({

selector: 'example-app',

template: `

<pdf-viewer [src]="pdfSrc"

[render-text]="true"

style="display: block;"

></pdf-viewer>

})

export class AppComponent {

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

}

As you can see we are rendering the pdf document component library and inside it we are providing the src attribute and also we are providing the url of the pdf document