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