Angular 16 PDF Viewer Tutorial Example

Angular 16 PDF Viewer Tutorial Example

PDF viewer in Angular 16; In this tutorial, you will learn how to integrate a PDF viewer into an Angular 16 application using a library like ng2-pdf-viewer.

Angular 16 PDF Viewer Tutorial Example

Steps to integrate pdf viewer in Angular 16 application using a library like ng2-pdf-viewer:

  • Step 1 – Set Up a New Angular Project
  • Step 2 – Install ng2-pdf-viewer npm Package
  • Step 3 – Import Modules in Module.ts File
  • Step 4 – Use ng2-pdf-viewer in the Component
  • Step 5 – Set the PDF Source in the Component
  • Step 6 – Serve Your Angular App

Step 1 – Set Up a New Angular Project

First, create a new Angular project by running the following commands in your terminal or cmd:

ng new my-new-app

Step 2 – Install ng2-pdf-viewer npm Package

Next, you’ll need to install the ng2-pdf-viewer library. Run the following command:

npm install ng2-pdf-viewer

Step 3 – Import Modules in Module.ts File

Once you have installed ng2 pdf viewer into your angular project. Next, you need to import pdf viewer module. So, visit src/app directory and open app.module.ts file. Then add the following code into it:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { PdfViewerModule } from 'ng2-pdf-viewer';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Create HTML PDF Viewer on View File

Open the app.component.html file and add the PDF viewer component like this:

<h1>Angular 16 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 – Use ng2-pdf-viewer in the Component

Open the app.component.ts file and set the pdfSrc variable to the path of your PDF file:

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    pdfSrc = '../assets/sample.pdf';
}

Step 6 – Serve Your Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

This will start a development server, and you can access your PDF viewer app at http://localhost:4200.

Conclusion

That’s it! You’ve created a simple Angular 16 PDF viewer using the ng2-pdf-viewer library. You can customize and enhance it further as needed. Make sure to check the documentation for ng2-pdf-viewer for more advanced options and features.

Recommended Angular Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of 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 from a starting stage. As well as demo example.

Leave a Reply

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