Ionic QR Code Generator & Reader

ionic-qr-code-generator-header

Recently a member of the Ionic Academy needed to generate a QR code directly from his Ionic app. The restrictions were also no Cordova plugins, so I found a nice solution to generate QR codes but also added a QR code reader as a little validation and learning for you!

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

Inside this Quick Win we will build a simple input that can be converted into a QR code. Once we got the code, we can also use the scan function of the app to see if it actually contains the value (who knows what’s behind these black boxes?)!

Setting up our QR Code App

We start with a blank Ionic app and install the ngx-qrcode2 NPM package to create QR codes. Additional we add the Cordova plugin and NPM package to use the camera as a bar code scanner, so go ahead and add:

The second 2 installs are of course only needed if you want to scan your code!

Now we need to import all of our new stuff, so open your src/app/app.module.ts and change it to:

We are ready to create our first QR codes now!

Implementing our QR Code functions

Our view consists only of a few elements. We need an input from which we will generate the QR code, and we need another button to call our scanner.

The QR code can be displayed directly from the element of the library which we installed. We only need to pass it into the ngx-qrcode element as the qrc-value, that’s all!

Nothing really fancy, so open your app/pages/home/home.html and change it to:

Now we just need to set the value of the element inside our class when we hit createCode, and also call the Cordova barcode scanner if we want to scan a code. So change your src/pages/home/home.ts to:

For testing, simply deploy the app to a device and run another instance inside your browser. You can now create your codes and scan it from your device!

You can find a video version of this quick win below.

  • Val Raemaekers

    Thank you Simon exactly what I was looking for !!

  • vipul singh

    Hello Simon,
    Can i have multiple fields in the input section?

  • Marcelo Gomes Filho

    Man, that’s awesome! Thanks a lot!

  • Val Raemaekers

    Hi Simon this does not work with ionic 3 lazy loading. Any advise on how to fix this ?
    Thanks
    Val