How To Read QR Codes In Angular ?

In a previous tutorial we covered how to generate QR Codes in Angular applications .In this tutorial we ae going to see how we can read them by building a simple Angular 4 demo application which you can find from the link .

Now lets get started by generating a new Angular application using the Angular CLI new command .

Open your terminal or command prompt ,depending on your operating system,then run :

ng new qrcode-reader 

Next navigate inside the root directory of your project :

cd qrcode-reader 

We'll be using An Angular component from npm for reading QR Codes so lets first install it .

npm install ng2-qrcode-reader --save

Head over to your project app/app.module.ts then import NgQRCodeReaderModule

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';

import { AppComponent } from './app.component';
import { NgQRCodeReaderModule } from 'ng2-qrcode-reader';

Then add it imports

@NgModule({
declarations: [
    AppComponent
],
imports: [
    BrowserModule,
    FormsModule,
    NgQRCodeReaderModule,
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Now you can use ng2-qrcode-reader component to read QR Codes via URLs ,DATA URLs or Canvas .

Open app/app.component.ts then copy and paste :

import { Component , ElementRef ,ViewChild ,Renderer2} from '@angular/core';

@Component({
selector: 'app-root',
template: `
<div fxLayout="column" fxFlexAlign="center">
    <div  fxFlex="20" fxFill>
    <md-input-container fxFill><textarea fxFill mdInput placeholder="qrr-value (URL or DATA URL)" [(ngModel)]="value"></textarea></md-input-container>
    <br/>

    </div>
    <div  fxFlex="60" fxFill>
    <ng2-qrcode-reader (result)="render($event)" [qrr-show]="showQRCode" [qrr-value]="value" [qrr-type]="elementType"></ng2-qrcode-reader>
    </div>
    <p>Result</p>
    <div #result  fxFlex="20" fxFill>
    </div>
    </div>

`,
styles: []
})
export class AppComponent {
elementType = 'url';
value = 'https://assets.econsultancy.com/images/resized/0002/4236/qr_code-blog-third.png';
@ViewChild('result') resultElement: ElementRef;
showQRCode : boolean = true;
constructor(private renderer: Renderer2) { 

}   
render(e){
    console.log(e.result);
    let element :Element = this.renderer.createElement('p');
    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);
}  

}

So to get the result of our QR Code reading we need to bind a method to result custom component event .

Conclusion


We have seen how we can easilly read QR Codes in Angular 4+ .

You can also read this tutorial : Create a QR Code Generator with Angular 4+

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status