How To Read QR Code In Angular

The Code Points September 03, 2022 0

In this article, we will learn how to reading QR codes in an angular application. Since there are many mobile applications available for such use. What happens, though, if we don't have a phone or if our battery is dead? Thus, we can use this to read data from QR codes on the web also.

So, let's start with the implementation

First, we need to create a new angular application using the following command in the terminal.

ng new read-qrcodes-angular

Now, We need to install the QR code reader npm package to provide the functionality for reading the QR code and getting the text.

Use the following command in the terminal and install the QR reader package.

npm install ng2-qrcode-reader --save

Now, using the following code adds the NgQRCodeReaderModule module into the app.module.ts file.

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 { }

Now, add the following code to the app.component.ts file.

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);
  }
}

Now, add the following code under the app.component.html file.

<!--The content below is only a placeholder and can be replaced.-->
<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>

<router-outlet></router-outlet>

Now, run the application using the ng serve command into the terminal and see the browser screen, now we are able to browse QR code images and read text from it.

Conclusion

In this article, we learned how to reading QR codes in an angular application.

I hope this article helps you and you will like it.👍

Please give your valuable feedback and comments or suggestion in the comment section

If you have any doubt or confusion then free to ask in the comment section.