PDF Viewer in Angular 11/10 Example

By Hardik Savani October 20, 2023 Category : Angular

If you need to see example of angular 11/10 ng2-pdf-viewer example. i would like to share with you angular 11/10 pdf viewer example. Here you will learn angular 11/10 pdf viewer and editor. it's simple example of angular 11/10 ng2-pdf-viewer print.

In this example we will use ng2-pdf-viewer npm package to pdf file viewer in angular 11 application. we will simply install that ng2-pdf-viewer npm package and use PdfViewerModule module to create code.

So, let's see bellow step and get qr code as like bellow screenshot:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install ng2-pdf-viewer npm Package

Now in this step, we need to just install ng2-pdf-viewer in our angular application. so let's add as like bellow:

npm install ng2-pdf-viewer --save

Step 3: Import PdfViewerModule

we will import PdfViewerModule module as like bellow code:

src/app/app.module.ts

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: Update Ts File

here, we need to update ts file as like bellow:

src/app/app.component.ts

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 5: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

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

<pdf-viewer [src]="pdfFilePath"

[render-text]="true"

style="display: block;"

></pdf-viewer>

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...

Shares