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.

Angular 16 PDF Viewer Tutorial Example