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?)!
The full quick win with snippets is only available to Ionic Academy members.
Join now for
- Unlimited access to all quick wins
- Library of 40+ step-by-step video courses
- Support for Ionic questions via Slack & private community
Current member? LOGIN
Thank you Simon exactly what I was looking for !!
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!
Hi Simon,
Thanks for that wonderful article , how to generate the QR code with company logo inside it. please help
Man, that’s awesome! Thanks a lot!
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!
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
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?
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 ?
What error exactly does it give when you install it?
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
Run this “npm install –save @ionic-native/barcode-scanner” and should hopefully solve the issue.
Hi simon this is error in ionic 3. help me please!
https://uploads.disquscdn.com/images/508aa3755e6bc8c5db394a7cc7f7906c803efaf78fe0100f6af483ca73775e81.png
this is code. https://uploads.disquscdn.com/images/dae3be04f7e524b58923f182d3a5afbd69a6fd5670e5d310cdaecbcc3fbe4110.png
Awesome work mate! Very clear explanation in your video 🙂 Keep it up 😀
Hi Simon, this works fine!, Do you have any idea how to read a QR/Barcode from a JP/image stored on the phone?
Hi Simon, How can i Save the QR Code Image..??
Use HtmlCanvas to convert the div to Image
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
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
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
]
Although I add NgxQRCodeModule in app.module.ts, error still generate. Please Help
you not install like at the top he that he post
Hi,
how did you resolved this issue…..?.
help me.
how can i save qr code as image ?
How Do i save QR COde as image?
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?
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
hi sir , same problem here , did you found a solution
(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
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
Thanks , it works Fine Android and IOS 😀
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
This is actually mind blowing tutorial. But is there any way to identify the second device that scanned the qrcode??
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??
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….
same problem here , did you found a solution please ?
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
Thank You.
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.
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
THANKS !!! it works
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
please can you explain further – where does this edit-config fix go?
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?
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
where is the tutorial???