Angular 14 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser (TypeScript)

Welcome folks today in this blog post we will be rendering pdf documents in browser using ngx-extended-pdf-viewer library in TypeScript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new angular project using the below command as shown below

ng new sampleapp

cd sampleapp

npm i ngx-extended-pdf-viewer

And after that you will see the below directory structure of the angular app as shown below

Now inside the app.module.ts file and copy paste the following code

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer';



@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxExtendedPdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

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

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

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

@NgModule({

declarations: [AppComponent],

imports: [

BrowserModule,

NgxExtendedPdfViewerModule

providers: [],

bootstrap: [AppComponent],

})

export class AppModule {}

And inside the app.component.html file and copy paste the following code

app.component.html

<ngx-extended-pdf-viewer
[src]="'assets/sample.pdf'"
[useBrowserLocale]="true" 
[textLayer]="true" 
[showHandToolButton]="true" 
[showPresentationModeButton]="true"
[(page)]="page"
[(pageLabel)]="pageLabel"
[showDownloadButton]="false"
>
</ngx-extended-pdf-viewer>

<ngx-extended-pdf-viewer

[src]="'assets/sample.pdf'"

[useBrowserLocale]="true"

[textLayer]="true"

[showHandToolButton]="true"

[showPresentationModeButton]="true"

[(page)]="page"

[(pageLabel)]="pageLabel"

[showDownloadButton]="false"

</ngx-extended-pdf-viewer>

As you can see in the above html code we are using the ngx-extended-pdf-viewer directive we are passing the src property where we are passing the path of the pdf file to render and then we are providing the page number to load.