Angular 12/11 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser Using TypeScript

Hello friend you may have many doubts about Angular 12/11 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser Using TypeScript We hope this article fills in all the doubts in the article. Let’s get back to the article.

Angular 12/11 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser Using TypeScript

Angular 12/11 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser Using TypeScript

Initialize Angular Project

npm i -g @angular/cli
ng new samplepdfproject
cd samplepdfproject
npm i ngx-extended-pdf-viewer

Go to angular.json file inside your project and copy paste the block of code inside assets array like this

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

After this inside your app.module.ts file of your angular project paste the below lines of code

app.module.ts

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

And also add the library inside your imports array as shown below in the same file

imports: [
    BrowserModule,
    NgxExtendedPdfViewerModule
  ],

Now go to app.component.ts file of your project and copy paste the below code

app.component.ts

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

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'sampleapp';

  public page = 2;

  public pageLabel!: string;

  
}

And now paste the below code into html code of your angular project

app.component.html

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

Now run the below angular project like this

ng serve

Angular 12/11 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser Using TypeScript

Read Also: Angular 12 jsPDF Billing Invoice PDF Generator Using Bootstrap 4 Web App Using Javascript

Final Words

Angular 12/11 Render PDF Documents Viewer Using ngx-extended-pdf-viewer Library in Browser Using TypeScript the article will satisfy all your doubts.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coding Deekshi. Here, I post about programming to help developers.

Share on:

Leave a Comment