How possible that to generate QR Code in ionic 5

user_12254003 0
Viewed 1103

Is there any possible method to generate QR Code in Ionic 5? I have tried but it keep says that qrcode is not known element.

This is my code

qrcode.html

<ion-item>
    <ion-input type="text" placeholder="My QR data" [(ngModel)]="myAngularxQrCode"></ion-input>
</ion-item>

<ion-card *ngIf="createdCode">
    <qrcode [qrdata]="'myAngularxQrCode'"></qrcode>
    <ion-card-content>
        <p>Value: {{qrData}}</p>
    </ion-card-content>
</ion-card>

qrcode.ts

export class qrcode implements OnInit {
    createdCode = null;
    myAngularxQrCode = null;
    qrData = 'http://hrms.my-epmo.com/default.aspx';

    constructor() {
        this.myAngularxQrCode = 'Your QR code data string';
    }
}

This is what i have tried. I hope someone can help me solve this problem. Thanks in advance!

ionic4 angular html
2 Answers

My app.module.ts looks like:

//imports....
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    QRCodeModule,
    .....
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    .....
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

My home.component.html looks like:

<ion-content padding>
   <ion-item>
    <ion-input type="text" placeholder="My QR data" [(ngModel)]="myAngularxQrCode"></ion-input>
    </ion-item>
    <ion-card >
      <qrcode [qrdata]="myAngularxQrCode"></qrcode>
      <ion-card-content>
      <p>Value: {{myAngularxQrCode}}</p>
      </ion-card-content>
    </ion-card>
</ion-content>
user_44779460

I've used ngx-qrcode.

In your template

<ngx-qrcode [qrc-value]="createdCode">
  </ngx-qrcode>

In your controller

ngOnInit() {
    this.user = this.globals.access.user;
    this.createCode(this.globals.access.user.username);
  }


  createCode(toEncode) {
    this.createdCode = toEncode;
  }
user_41462390
Related