How To Read QR Codes In Angular - Hello friend inabnomaniiyaha, In the article that you read this time with the title How To Read QR Codes In Angular, we have prepared this article well for you to read and take information in it. hopefully the contents of the post Artikel Angular,what we write you can understand. Alright, happy reading.

Judul : How To Read QR Codes In Angular
link : How To Read QR Codes In Angular

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

}  

}

That's the articleHow To Read QR Codes In Angular

That's it for the article How To Read QR Codes In Angular this time, hopefully can be useful for all of you. well, see you in another article post.

You are now reading the articleHow To Read QR Codes In Angular with link addresshttps://inabnonapudyawanabing.blogspot.com/2020/11/how-to-read-qr-codes-in-angular.html

Tweet