Post
Ask Question

Upload And Read QR Code Using Angular 7

Introduction

 
Here, we will learn about reading QR code by uploading it using Angular 7. We have many mobile applications for that purpose, but what if we don't have a mobile phone or our battery is discharged? Then, we can use this to read QR code data.

You can also refer to this article in which I have generated and downloaded the QR code.
 
Prerequisites
  • Basic knowledge of Angular 7
  • Visual Studio Code
  • Angular CLI must be installed
  • NodeJS must be installed
Let’s get started.
 
Open Visual Studio Code and open a new terminal.
 
 
Type the following command to generate the new Angular 7 application.
  1. ng new read-qrcodes-angular7 --routing  
 
Now, open the project by opening the folder from Visual Studio Code.
 
We have to install the QR code package functionality for generating the QR code from the text.
 
Type the following command in the terminal. 
  1. npm install ng2-qrcode-reader --save  
Now the package will be installed in our application.

Go to app.module.ts file and add the reference there for the QR code package,

  1. import { AppRoutingModule } from './app-routing.module';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  5. import { AppComponent } from './app.component';  
  6. import { NgQRCodeReaderModule } from 'ng2-qrcode-reader';  
  7. import { BrowserModule } from '@angular/platform-browser';  
  8.   
  9. @NgModule({  
  10.   declarations: [  
  11.     AppComponent  
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     FormsModule,  
  16.     NgQRCodeReaderModule,  
  17.     BrowserAnimationsModule,  
  18.     AppRoutingModule  
  19.   ],  
  20.   providers: [],  
  21.   bootstrap: [AppComponent]  
  22. })  
  23. export class AppModule { }  
Open the app.component.ts file and replace with the following code.
  1. import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   title = 'read-qrcodes-angular7';  
  10.   elementType = 'url';  
  11.   public imagePath;  
  12.   value : any;  
  13.   @ViewChild('result') resultElement: ElementRef;  
  14.   showQRCode: boolean = false;  
  15.   constructor(private renderer: Renderer2) {  
  16.   }  
  17.   preview(files) {  
  18.     if (files.length === 0)  
  19.       return;  
  20.     var mimeType = files[0].type;  
  21.     if (mimeType.match(/image\/*/) == null) {  
  22.       alert("Only images are supported.");  
  23.       return;  
  24.     }  
  25.     var reader = new FileReader();  
  26.     reader.readAsDataURL(files[0]);  
  27.     reader.onload = (_event) => {  
  28.       this.value = reader.result;  
  29.       console.log(reader.result);  
  30.       this.showQRCode = true;  
  31.     }  
  32.   }  
  33.   render(e) {  
  34.     let element: Element = this.renderer.createElement('h1');  
  35.     element.innerHTML = e.result;  
  36.     this.renderElement(element);  
  37.   }  
  38.   
  39.   renderElement(element) {  
  40.     for (let node of this.resultElement.nativeElement.childNodes) {  
  41.       this.renderer.removeChild(this.resultElement.nativeElement, node);  
  42.     }  
  43.     this.renderer.appendChild(this.resultElement.nativeElement, element);  
  44.   }  
  45. }  
Open the app.component.html file and add the code in it.
  1. <!--The content below is only a placeholder and can be replaced.-->  
  2. <div style="text-align:center">  
  3.   <h2>Upload an QR code</h2>  
  4.   <input type="file" #file name="file" id="file" (change)="preview(file.files)">  
  5.   <ng2-qrcode-reader (result)="render($event)" [qrr-show]="showQRCode" [qrr-value]="value" [qrr-type]="elementType">  
  6.   </ng2-qrcode-reader><br>  
  7.   <div #result></div>  
  8. </div>  
That’s it. We are done with it.
 
Run the application by typing the ng serve command.
 
Output
 
You can download the source code from here.
 
Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it. 


Similar Articles