ANGULAR 14: How to Upload PDFs and Images using Ngx Extended PDF Viewer | #shortsvideo #coding #tutorial

In this tutorial, we will learn how to upload PDF and images using Angular 14 and integrate the Ngx Extended PDF Viewer plugin to display PDF files in our Angular application. This tutorial will guide you through the process step by step and will help you understand the concepts behind file uploads and PDF viewing in Angular.

Step 1: Setting up the Angular project
First, make sure you have Angular CLI installed on your system. If not, you can install it by running the following command:

npm install -g @angular/cli

Next, create a new Angular project by running the following command:

ng new angular-pdf-viewer

Navigate to the newly created project directory:

cd angular-pdf-viewer

Step 2: Installing Ngx Extended PDF Viewer
To install the Ngx Extended PDF Viewer plugin, run the following command:

npm install ngx-extended-pdf-viewer

Step 3: Implementing the file upload functionality
Create a new component for the file upload functionality by running the following command:

ng generate component file-upload

Next, open the file-upload.component.html file and add the following HTML code:

<div>
  <input type="file" (change)="onFileSelected($event)">
</div>

Now, open the file-upload.component.ts file and add the following TypeScript code:

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

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {

  onFileSelected(event: any) {
    const file: File = event.target.files[0];
    console.log(file);
    // Add your file upload logic here
  }

}

Step 4: Displaying the PDF file using Ngx Extended PDF Viewer
Create a new component for displaying the PDF files by running the following command:

ng generate component pdf-viewer

Next, open the pdf-viewer.component.html file and add the following HTML code:

<ngx-extended-pdf-viewer [pdfSrc]="pdfSrc" [useBrowserLocale]="true"></ngx-extended-pdf-viewer>

Now, open the pdf-viewer.component.ts file and add the following TypeScript code:

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

@Component({
  selector: 'app-pdf-viewer',
  templateUrl: './pdf-viewer.component.html',
  styleUrls: ['./pdf-viewer.component.css']
})
export class PdfViewerComponent {
  pdfSrc: string = 'assets/pdf-sample.pdf';
}

Step 5: Integrating the file upload and PDF viewer components
Open the app.component.html file and add the following HTML code to integrate the file upload and PDF viewer components:

<app-file-upload></app-file-upload>
<app-pdf-viewer></app-pdf-viewer>

Now, you can run your Angular project by using the following command:

ng serve

Navigate to http://localhost:4200/ in your browser, and you should see the file upload input and a PDF viewer displaying the PDF file specified in the pdfSrc variable.

That’s it! You have successfully implemented file upload functionality and integrated the Ngx Extended PDF Viewer plugin in your Angular project. You can now customize and enhance the file upload and PDF viewing features according to your requirements. Hope this tutorial was helpful! #shortsvideo #coding #tutorial