Newbie with ionic 2, I try without success to make qr code app. I know there is already many posts about that but I don’t find solutions for my issues. What I want? Generate, display and download a qr code and in the other way read a qr code. I’m using cordova plugin barcodescanner. I include { BarcodeScanner } from ‘ionic-native’. I’ve also read the documentation about that but not so much information or example for usage. I managed to read a barcode implementating method scan() but when I use encode(), my app crashes. I don’t understand why. See my code:
In home.ts file:
import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import { BarcodeScanner } from ‘ionic-native’;
// For generating qr code, when I click on it, it display qr code then my app crashes ** make() {** ** BarcodeScanner.encode (BarcodeScanner.Encode.TEXT_TYPE, ‘Hello World’)** ** .then ((success) => {** ** this.urlImage = success.file;** ** //alert(this.urlImage);** ** }), (error) => {** ** alert (error);** ** }** ** }**
}
And this is home.html file:
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps
that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the <code>src/pages/</code> directory to add or change tabs,
update any existing page or create new pages.
</p>
<button ion-button block (click)="click()">Scan</button>
<button ion-button block (click)="make()">Make</button>
// I've put an image tag before, but there is no display
</ion-content>
I’ve seen some topics talk about angular-qrcode but I don’t know how to use it properly in ionic 2. So how and where I can retrieve and display (btw download it) my qr code generated by make function
Please anyone help me, thanks guys.
So, how can I do to generate a qr code? I see plenty external libraries but I don’t know how to include them. Examples or links will be very appreciated!
I try that. Unfornutaly, I’ve always a crash. Look at my code in home.ts:
make function is a bouton which active encode method.
export class HomePage {
private urlImage: any;
constructor (navCtrl: NavController) {
this.urlImage = ’ ';
}
make() {
BarcodeScanner.encode (BarcodeScanner.Encode.TEXT_TYPE, ‘Hello World’)
.then ((success) => {
this.urlImage = success.file; // I think the problem is here
//alert("Encoding success: " + success);
}), (error) => {
alert (error);
}
}
}
I tried angular2-qrcode, work fine, thanks! I try now to make it dynamically. Maybe I’m doing wrong but look at my code please:
home.ts:
export class HomePage {
private textField: any;
private textEncode: any;
private urlImage: any;
// For generating qr code, when I click on it, it display qr code then my app crashes
make() {
this.textEncode = this.textField; // Put input value named textField into textCode
}
In home.html: <ion-item> <ion-label>Entrez votre texte</ion-label> <ion-input type="text" [(ngModel)]="textField"></ion-input> </ion-item> <button ion-button block (click)="click()">Scan</button> <button ion-button block (click)="make()">Make</button> <p>{{textEncode}}</p> If I delete div tag with qr-code tag, tag p display correctly input value but when I use qr-code tag, I see the white screen death!!! Don’t understand why <div> <qr-code [data]="'{{textEncode}}'" [size]="250"></qr-code> </div>
Thanks for your reply, I did like that and it works! Very thankful for your help everyone. Now my new challenge is to print qr code I generate. I use the ionic native printer but in my device “Android”, it doesn’t work. Always looking solutions. Thanks again. I’ll post my solution about generate qr code for anyone who can have same problem.