PDF Viewer in Angular 17 with NG2 PDF Viewer

It is very easy to create a PDF viewer in an Angular application, for this, you install ng2-pdf-viewer in your Angular application, and using it you can create a PDF viewer in a very simple way.

If you are looking for a guide on how to create a PDF viewer in the Angular 17 application step by step, then this is for you, to do it easily in the Angular application read this guide, it will help you a lot.

How to Create an Angular PDF Viewer with ng2-pdf-viewer

Steps to create pdf viewer in angular applications using ng2-pdf-viewer module:

Step 1 – Set Up a New Angular Project

Simply open your cmd or terminal window and type ng new my-new-app --no-standalone command into it to set up the new angular project in your system:

ng new my-new-app --no-standalone

Step 2 – Install NPM ng2-pdf-viewer Module

To install npm ng2-pdf-viewer module by using the npm install ng2-pdf-viewer command on cmd or terminal window:

cd my-new-app
npm install ng2-pdf-viewer --legacy-peer-deps

Step 3 – Import Modules in Module.ts File

Navigate to src/app folder and open app.module.ts file, and then import ng-2pdf-viewer into it like the following:

...................................
...............................
...........................
import { PdfViewerModule } from 'ng2-pdf-viewer';
............................
.........................
  imports: [
    BrowserModule,
    PdfViewerModule
  ],

Step 4 – Create PDF Viewer Template

Simply open app.component.html file and create PDF viewer like the following into it:

<h1>Angular 17 PDF File Viewer Example - Tutsmake.com</h1>

<pdf-viewer [src]="pdfSrc" [show-all]="true"></pdf-viewer>

In the above code, pdfSrc is a variable that will hold the path to your PDF file. You can replace it with the URL or path to your PDF file.

Step 4 – Set PDF File Path

Simply open the app.component.ts file and set pdf file path on pdfSrc variable into it like the following:

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

export class AppComponent {
    pdfSrc = '../assets/sample.pdf';
}

Step 5 – Start Angular Application

Run ng serve command on cmd or terminal window to start angular application development server:

ng serve

Now, open your browser and access PDF viewer application at http://localhost:4200.

Conclusion

You have learned to create a PDF viewer in an Angular application using simple steps, And you can use it to make changes as per your requirements and it is free.

Yes, I believe that I was able to help you with this. If you have any further questions, you can comment, or mail me at [email protected].

Recommended Angular Tutorials