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.
