Issue
Good afternoon,
I am trying to create a card that displays a QR code from a fixed value. The plugin that I've found takes the value from an input and a button, is there any way to change the js to take the input from a fixed value?
home.page.html
<ion-card-content>
<div class="ion-padding">
<ion-input type="text" placeholder="My QR data" [(ngModel)]="qrData">
</ion-input>
<button ion-button full icon-left (click)="createCode()">
<ion-icon name="barcode"></ion-icon>Create
</button>
<ion-card>
<div align='center'>
<ngx-qrcode [qrc-value]="createdCode">
</ngx-qrcode>
</div>
<ion-card-content>
<div align='center'> ID: {{ createdCode }} </div>
</ion-card-content>
</ion-card>
home.page.ts
import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
qrData = null;
createdCode = null;
scannedCode = null;
constructor(private barcodeScanner: BarcodeScanner) {}
createCode () {
this.createdCode = this.qrData;
console.log(this.createdCode);
}
}
Thank you in advanced for the help!
Solution
The ionic part and the qrcode part are unrelated. Remove the input and button and simply bind a constant string to [qrc-value]
. Notice the single quotes inside the double quotes in [qrc-value]="'fixed value'"
. It denotes using the literal string 'fixed value'
<ion-card-content>
<div class="ion-padding">
<ion-card>
<div align='center'>
<ngx-qrcode [qrc-value]="'fixed value'">
</ngx-qrcode>
</div>
<ion-card-content>
<div align='center'> ID: fixed value </div>
</ion-card-content>
</ion-card>
Working example: Stackblitz
Answered By - ruth
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.