How To Read QR Codes In Angular

 How To Read QR Codes In Angular

Step 1: Create project

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

}  

}