How to create a PDF viewer in angular - ng2-pdf-viewer

This article will look at how to create a PDF viewer in an angular application.

For the PDF viewer in the angular application, we will use the npm package. We are going to use the ng2-pdf-viewer npm package. There are multiple npm packages available but we will use the stable ng2-pdf-viewer .

ng2-pdf-viewer support angular 5+ version and it manages all the task related to PDF in angular.

Angular 13 PDF viewer example:

In this quick tutorial, we will check how to implement the ng2-pdf-viewer in an existing or new application. Here I am assuming you have already done the angular application set up on your system. If you haven’t done it please follow this blog and set up the angular application on your system.

H ow to install angular in windows

Step 1: Create an Angular application

For demo purposes, we are going to create the new application by using the command.

ng new Angular-PDF-Viewer

Once the application is created, change the directory to root by using the following command

cd Angular-PDF-Viewer

Step 2: Add ng2-pdf-viewer package

Add the rpm package by using the following command, it will add the package to your application

npm i ng2-pdf-viewer

Step 3: Modify AppModule

Import the package in the app.module.ts file as below, so changes will apply to components

import { PdfViewerModule } from 'ng2-pdf-viewer';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Also, we need to add the changes in components for PDF viewer code, add the below code in the component template file,

<pdf-viewer [src]="pdfSrc"
  [render-text]="true"
  [original-size]="false"
  style="width: 100px; height: 100px"
></pdf-viewer>

For pdf file path add changes in component fie as below,

export class AppComponent {
  pdfSrc = "https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf";
}

Step 4: Run the application

Now it’s time to run the application, all these changes are enough to run the Angular application. use the below command to test the application

ng serve --o

--o will open the application on default port 4200, If the port is already in use you can change the port.

Output:

Our changes are working fine, output as below

Following the four steps, the pdf viewer will work without any errors.

If you need help,

Read this post again, if you have any confusion, or else add your questions to Community

How to create a PDF viewer in angular – ng2-pdf-viewer