PDF Viewer in Angular 11 with NG2 PDF Viewer

In this article, we’ll learn pdf viewer in Angular. For that, we used the “ng2-pdf-viewer” module. The ng2-pdf-viewer is a package exclusively built for creating or implementing PDF viewer components in angular applications.
Let’s create a new project to implement pdf viewer in angular for that you need to run the following command to create a project.


ng new pdf-viewer

“pdf-viewer” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd pdf-viewer”. To Run angular applications, it required to run “ng serve”.


After that, we need to install the ng2-pdf-viewer npm package in our application. For that run the below command to install.


npm install ng2-pdf-viewer

After installing the module, we need to put it in our “app.module.ts” file so we can use it in our code. below is the code need to update in the “app.module.ts” files.


import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

import { PdfViewerModule } from 'ng2-pdf-viewer';


@NgModule({
  imports:      [ BrowserModule, FormsModule, PdfViewerModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Let’s add the below code in our app.component.ts file to read a pdf file.


import { Component, VERSION } from "@angular/core";

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

below code need to “app.component.html” file.


<h2>Integrate PDF File Viewer in Angular</h2>

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



Output

Below is the full embeded code for pdf viewer in angular. you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •