Angular 14 PDF Viewer Example Tutorial

Angular 14 pdf viewer example; In this tutorial, you will learn how to create a pdf viewer in the angular 14 apps using ng2-pdf-viewer npm Package.

Angular 14 PDF Viewer Example Tutorial

Use the following steps to create pdf viewer in agnular 14 apps; as follows:

  • Step 1 – Create New Angular App
  • Step 2 – Install ng2-pdf-viewer npm Package
  • Step 3 – Import Modules in Module.ts File
  • Step 4 – Create HTML PDF Viewer on View File
  • Step 5 – Import Compnents in Component ts File
  • Step 6 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install ng2-pdf-viewer npm Package

In this step, you need to install ng2-pdf-viewer npm Package in our angular application. So, open your terminal and execute the following command:

npm install ng2-pdf-viewer

Step 3 – Import Modules in Module.ts File

In this step, 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

In this step, create html and for display pdf viewer in angular apps. So, visit src/app/app.component.html and update the following code into it:

<h1>Angular 13 PDF File Viewer Example - Tutsmake.com</h1>

<pdf-viewer [src]="pdfFilePath"
              [render-text]="true"
              style="display: block;"
  ></pdf-viewer>

Step 5 – Import Components in Component ts File

In this step, visit the src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    pdfFilePath = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}

Step 6 – Start Angular App

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

ng serve

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 *