Ionic QR Code Generator & Reader [v3]

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!

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?)!


ionic-academy-start

You must be a Member to view this Quick Win

Access all courses and lessons, track your progress, connect with Developers & build awesome Ionic Apps.

Read Next..

Ionic Side Menu With Role Based Authentication When you are creating an Ionic app with different roles, chances are high you need different elements/pages for your different user roles. In case of ...
Ionic Caching Service By default your Ionic app comes without specific HTTP caching, but sometimes it can really make sense to cache your requests for a duration to make he...
Protecting Your App With Ionic Auth Guards Recently I dig into authentication with Ionic a bit more and found a rather unrepresented topic that can actually help to secure your app really easy....

Read Next..

Include CSS+JS Files from NPM Packages with Ionic When working with external libraries and NPM packages, you sometimes need to load those files in a different way than the rest of your packages is alr...
Ionic Native Page Transitions for iOS and Android The standard Ionic page transitions already look very decent compared to older Cordova apps from some years ago. However, if you want some more typica...
Ionic Token Input with Autocomplete When you want to automatically transform your input values into small chunks or tokens just like the Facebook app, you will not get far with the stand...

Comments on Ionic QR Code Generator & Reader [v3]

  1. Val Raemaekers says:

    Thank you Simon exactly what I was looking for !!

  2. vipul singh says:

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

    1. 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!

      1. rareddy says:

        Hi Simon,
        Thanks for that wonderful article , how to generate the QR code with company logo inside it. please help

  3. Marcelo Gomes Filho says:

    Man, that’s awesome! Thanks a lot!

  4. Val Raemaekers says:

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

    1. 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!

      1. Val Raemaekers says:

        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

  5. Om Prakash says:

    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 ?

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

      1. Om Prakash says:

        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 ?

        1. What error exactly does it give when you install it?

          1. Om Prakash says:

            it gives me error when i import this line of code “import { BarcodeScanner } from ‘@ionic-native/barcode-scanner’;. please see the error screen shot ? https://uploads.disquscdn.com/images/88982462facaa006e9da2e45ba7f5b4b0f0070301dbaa7c61e349d2090a312f7.png

          2. Vikram says:

            Run this “npm install –save @ionic-native/barcode-scanner” and should hopefully solve the issue.

  6. Kevin says:

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

  7. Hector Oviedo says:

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

  8. Manuel Oleaga says:

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

    1. akakpo adje hermann says:

      Use HtmlCanvas to convert the div to Image

      1. DiggleB says:

        Please could you help me out with this. I tried using this https://github.com/MarouaneSH/Ionic-jsPdf-Html2Canvas

        but I’m only getting the number and not the QR code

  9. Keo Urdom says:

    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

    1. umefarooq says:

      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

      ]

      1. mar mar says:

        Although I add NgxQRCodeModule in app.module.ts, error still generate. Please Help

        1. Kin Din says:

          you not install like at the top he that he post

    2. Dasharath Bhukya says:

      Hi,

      how did you resolved this issue…..?.

      help me.

  10. yushin kalambai says:

    how can i save qr code as image ?

  11. yushin kalambai says:

    How Do i save QR COde as image?

  12. Painsi Günther says:

    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?

  13. Buchori says:

    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

    1. yassine akkari says:

      hi sir , same problem here , did you found a solution

  14. Abhay Jani says:

    (node:2714) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): Error: /Users/abhayjani/Desktop/map/platforms/android/gradlew: Command failed with exit code 1 Error output:
    FAILURE: Build failed with an exception.

    i facing error with barcode plugin

  15. krupali says:

    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”>

    Generated this error! Please Help me

  16. Ahmed LAGHA says:

    Thanks , it works Fine Android and IOS 😀

  17. Zidni Agni says:

    I found a solution on scan QRcode on ios
    1. open config.xml
    add

    2. open -Info.plist

    add

    NSCameraUsageDescription
    QRCode Scanner
    NSPhotoLibraryUsageDescription
    QRCode Scanner

  18. Deemene Saint Epleele says:

    This is actually mind blowing tutorial. But is there any way to identify the second device that scanned the qrcode??

  19. chetan dhanvij says:

    Hi,

    Is there any option to customize the camera view in the plugin? like can i have some buttons or header in the camera scanner view??

  20. Nurul Azwani Marwani says:

    this is good tutorial! however after I scanned the qr code on the android device my app goes freeze and didnot show the text for the qr code scanned. would you mind helping me? please….

    1. yassine akkari says:

      same problem here , did you found a solution please ?

  21. amani mouldi says:

    hello! i want to know if this work in both android and ios?? if yes, should be the ios plateform added to my app or how? because i only added the android plateform to my app, and when i installed the plugin codebar scann i got this msg: “Installing “phonegap-plugin-barcodescanner” for android

    Android Studio project detected
    Subproject Path: CordovaLib
    Subproject Path: app
    Adding phonegap-plugin-barcodescanner to package.json

    Saved plugin info for “phonegap-plugin-barcodescanner” to config.xml”.

    thanks

  22. rachith hegde says:

    Thank You.

  23. Sai Chaitanya says:

    Hi Simon,
    The above thing is to generate a qrcode from a text given. But i want to upload an image and then convert it into qrcode. Is that possible? If yes please help..that’s for my college project.

  24. Sai Chaitanya says:

    HI simon,
    The above thing will generate a qrcode for given text..but i want to upload an image and then convert to qrcode. Is that possible? If yes please help me

  25. Arif Muhammad says:

    THANKS !!! it works

  26. Mak Kul says:

    Trying to run this on iPhone and getting following error in xcode. Not sure where to set NSCameraUsageDescription(tried all the things specified above with no luck. Xcode does not show any info.plist.

    2018-08-27 21:11:10.523600-0400 QrCode[5992:4288299] Error: NSCameraUsageDescription is not set in the info.plist

    2018-08-27 21:12:00.006744-0400 QrCode[5992:4288299] Status bar could not find cached time string image. Rendering in-process.

    Found the answer to this problem above.

    The way you modify the Info.plist is by doing an edit-config section. here is what I did based on some google searches.

    Scan QRCode

    After this setting the scanner got access to Camera and the code worked.

    I have the latest version of the plugins

    1. Richard Stevens says:

      please can you explain further – where does this edit-config fix go?

  27. Francisco Vieira says:

    Hi there,
    The ngx-qrcode2 plugin doesn’t work when I update to Angular 5.0.0, do you know any other solution? Maybe a component or something?

  28. nikhil shende says:

    its good tutorial for, i have problem with build apk
    showing following error

    UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
    https://uploads.disquscdn.com/images/2190e5147bf8256faf4a895fd0f86cbe9a2130426e00a72505851963f39f5f1a.png

  29. Nur Khasanah says:

    where is the tutorial???

Leave a Reply

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