Solution 1 :

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>

Solution 2 :

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;
  }

Problem :

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!

Comments

Comment posted by npmjs.com/package/angularx-qrcode#basic-usage

Did you import in AppModule?

Comment posted by Aech

@Beller yes i already import it. but still that error come up

Comment posted by stackblitz.com/edit/ionic-s9uw4k

I have made a stackblitz sample:

Comment posted by Aech

okay, I have removed

Comment posted by Beller

Yes, you have set it like createdCode = null; But I didn’t know that it will change or not… so I simply removed..

Comment posted by Aech

still did not resolve my problem. It says undefined

Comment posted by Argo

What Is undefined?

Comment posted by Aech

that

By

Leave a Reply

Your email address will not be published. Required fields are marked *