How to Upload and Read QR-Code with Angular

In this article, we’ll learn how to read QR code by uploading it using Angular 7

We have many mobile and tablet applications for that purpose, but what if we don’t have devices or our battery is discharged? Then, we will use this to read QR code data.

Prerequisites

1] Basic knowledge of Angular 7
2] Visual Studio Code
3] Angular CLI must be installed
4] NodeJS must be installed

Open Visual Studio Code and open a new terminal.

Using the following command to generate the new Angular 7 application.

ng new read-qrcodes-angular7 --routing  

Let’s go, and open the project by opening the folder from Visual Studio Code.

then, We have to install the QR code package functionality for generating the QR code from the text.

Using the following command in the terminal.

npm install ng2-qrcode-reader --save 

After that, the package will be installed in our application. then Go to app.module.ts file and add the reference there for the QRcode package,

import { AppRoutingModule } from './app-routing.module';  
import { NgModule } from '@angular/core';  
import { FormsModule } from '@angular/forms';  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
import { AppComponent } from './app.component';  
import { NgQRCodeReaderModule } from 'ng2-qrcode-reader';  
import { BrowserModule } from '@angular/platform-browser';  
  
@NgModule({  
  declarations: [  
    AppComponent  
  ],  
  imports: [  
    BrowserModule,  
    FormsModule,  
    NgQRCodeReaderModule,  
    BrowserAnimationsModule,  
    AppRoutingModule  
  ],  
  providers: [],  
  bootstrap: [AppComponent]  
})  
export class AppModule { }

Open the app.component.ts file and replace it with the following code.

import { Component, ElementRef, ViewChild, Renderer2 } from '@angular/core';  
  
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'read-qrcodes-angular7';  
  elementType = 'url';  
  public imagePath;  
  value : any;  
  @ViewChild('result') resultElement: ElementRef;  
  showQRCode: boolean = false;  
  constructor(private renderer: Renderer2) {  
  }  
  preview(files) {  
    if (files.length === 0)  
      return;  
    var mimeType = files[0].type;  
    if (mimeType.match(/image\/*/) == null) {  
      alert("Only images are supported.");  
      return;  
    }  
    var reader = new FileReader();  
    reader.readAsDataURL(files[0]);  
    reader.onload = (_event) => {  
      this.value = reader.result;  
      console.log(reader.result);  
      this.showQRCode = true;  
    }  
  }  
  render(e) {  
    let element: Element = this.renderer.createElement('h1');  
    element.innerHTML = e.result;  
    this.renderElement(element);  
  }  
  
  renderElement(element) {  
    for (let node of this.resultElement.nativeElement.childNodes) {  
      this.renderer.removeChild(this.resultElement.nativeElement, node);  
    }  
    this.renderer.appendChild(this.resultElement.nativeElement, element);  
  }  
}

Open the app.component.html file and add the code in it.

<div style="text-align:center">  
  <h2>Upload an QR code</h2>  
  <input type="file" #file name="file" id="file" (change)="preview(file.files)">  
  <ng2-qrcode-reader (result)="render($event)" [qrr-show]="showQRCode" [qrr-value]="value" [qrr-type]="elementType">  
  </ng2-qrcode-reader><br>  
  <div #result></div>  
</div>

That’s it. We are done with it. Run the application by typing the ng serve command and see the following output.

#angular #angula7 #javascript #qr-code