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?

    • Well you have to feed in one final string to create the QR code but you could have multiple fields and then create your own value from combining those inputs!

  • 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

    • Hey Val, which version? I think with lazy loading you would need to import the NgxQRCodeModule inside the module file of your page and not at the root level of the app!

      • Val Raemaekers

        Hi Simon
        ionic 3.9.2
        Could you please give detailed instructions as to how to integrate into module file of my page ?
        Or maybe publish another example using lazy loading ?
        Thanks
        Val

  • Om Prakash

    not working in ionic 2 with angular 2 . it gives error while installing packages ? please help me as soon as possible. i am using VS 2017 cordova and creating app using ionic 2 ?

    • What error exactly? And why aren’t you using Ionic 3?

      • Om Prakash

        hey Simon thanks for reply ? actually i want to create qr code in my ionic 2 based app and for that i m using angular 2 on VS 2017 cordova. it gives me error while installing the packages of ngx-qrcode2 and for barcodescanner ? Any advise on how to fix this ?

  • เกม
  • Kevin

    Awesome work mate! Very clear explanation in your video 🙂 Keep it up 😀

  • Hector Oviedo

    Hi Simon, this works fine!, Do you have any idea how to read a QR/Barcode from a JP/image stored on the phone?

  • Manuel Oleaga

    Hi Simon, How can i Save the QR Code Image..??

  • Keo Urdom

    Error: Template parse errors:
    Can’t bind to ‘qrc-value’ since it isn’t a known property of ‘ngx-qrcode’.
    1. If ‘ngx-qrcode’ is an Angular component and it has ‘qrc-value’ input, then verify that it is part of this module.
    2. If ‘ngx-qrcode’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
    3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (”

    ][qrc-value]=”createdCode”>

    Genarated this error!! please help

    • umefarooq

      ngx-qrcode template not available for your specific page, to make it available to all components and pages add it to app providers like below.

      providers: [

      StatusBar,

      SplashScreen,

      {provide: ErrorHandler, useClass: IonicErrorHandler},

      NgxQRCodeModule

      ]

  • yushin kalambai

    how can i save qr code as image ?

  • yushin kalambai

    How Do i save QR COde as image?

  • Painsi Günther

    Hello, how can I get the QR code in a resolution larger than 116×116? This makes the QR code bigger but out of focus:
    SCSS: .qr-code> img {width: 100%; }
    What could I do to keep the QR code sharp?

  • Buchori

    Hello simmon, your tutorial really helpful for me, in my app make qrcode work, but my app don’t want show camera for scanner? can you help me? i’m sorry for bad english