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. 

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

<ion-title>QR CODE</ion-title>
<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>
Your QR Code : {{createCode}}


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

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

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 *