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].
