IONIC QR CODE GENERATOR

IONIC QR CODE GENERATOR

In this tutorial discuss about how to generate own QR code, so follow simple steps that have been given below. so create a blank template and generate simple QR code. 

  • $ ionic start tutorial blank --type=ionic-angular
  • $ cd tutorial/
  • $ ionic cordova plugin add phonegap-plugin-barcodescanner
  • $ npm install ngx-qrcode2
  • $ ionic cordova add platform ios
  • $ ionic cordova build ios
  • $ ionic cordova run ios

Edit src/app/pages/home.html to get design

<ion-header>
<ion-navbar>
<ion-title>QR CODE</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-input type="text" placeholder="your qr text" [(ngModel)]="qrdata"></ion-input>
<button ion-button full color="secondary" (click)="create()">Generate</button>
<button ion-button full color="secondary" (click)="clear()">Clear</button>

<ion-card *ngIf="createCode">
<ngx-qrcode [qrc-value]="createCode"></ngx-qrcode>
<ion-card-content>
Your QR Code : {{createCode}}
</ion-card-content>
</ion-card>

</ion-content>

Edit src/app/pages/home.ts to function

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})

export class HomePage {
qrdata: any;
createCode: any;

constructor(public navCtrl: NavController) { }

public create() {
this.createCode =this.qrdata;
}

public clear() {
this.createCode ='';
}

}

Follow up with high-quality video tutorial on YouTube

Leave a Reply

Your email address will not be published. Required fields are marked *