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

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *