Load PDF file in Angular

Load PDF file in Angular

In most projects one common requirement is to load and view PDF documents directly within the application. There are differents ways we can achive this, In this article, I will walk through the process of integrating an angular application using ngx-extended-pdf-viewer a third-party package.
Please note that for this article i am using Angular 18.

Step 1: Set Up the Environment
Go to your terminal and install the Angular command-line interface (CLI). This will help you get up and running quickly with Angular:

 npm install -g @angular/cli

Step 2: Create a New Angular Project

Once Angular CLI is installed, you can use it to create a new Angular project. Navigate to the directory where you want to create your project and run the following command:

ng new ngx-pdf-viewer  --no-standalone

Step 3: Serve Your Angular Application:

After the project is created, navigate into the project directory then use an Angular CLI to serve your application locally by running:

ng serve

The project is running on localhost:4200

Output will be like this

# Adding ngx-extended-pdf-viewer package
Step1 : Add the ngx-extended-pdf-viewer

Run the command below to install the ngx-extended-pdf-viewer library via npm. This will install the latest version of the library:

npm install ngx-extended-pdf-viewer

Once the package is installed successfully, Your package.json will be updated with the ngx-extended-pdf-viewer package.

Step2: Configure the angular.json file

Now you need to configure the angular.json file. You’ll add this configuration under theprojects > yourProjectName > architect > build > options > assets section:

  "input": "node_modules/ngx-extended-pdf-viewer/assets/",
  "output": "/assets/"

Your angular.json looks like this

Step 3: Configure the application module:

Go to the app.module.ts file and import NgxExtendedPdfViewerModule from ngx-extended-pdf-viewer and pass it to the imports array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxExtendedPdfViewerModule } from 'ngx-extended-pdf-viewer'; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxExtendedPdfViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Load the PDF document :

Add your PDF files in the src/assets directory as shown below:

Now load the PDF file in your app.component.html file as shown below

<ngx-extended-pdf-viewer [src]="'assets/pdf/sample_file.pdf'"></ngx-extended-pdf-viewer>

Your output will be like this

You can find the complete source code in GitHub.

# Enhancing the PDF Viewer
There are many configuration options you can use. You can see all the options on the ngx-extended-pdf-viewer website.

Say for example you want to change the zoom size and the height of the pdf view, you can do so by adding the configuration parameters as shown below:

 <ngx-extended-pdf-viewer [src]="'assets/pdf/sample_file.pdf'"
      [height]="'90vh'" zoom="30%">
    </ngx-extended-pdf-viewer>

Conclusion:

In this article, we explored how to leverage the PDF viewer to load and view PDFs within Angular applications using the external packages.

Hopefully, this article is useful to you and your project.