Create QR codes with ngx-qrcode2
Check out our Angular in-house trainings or a public Angular courses.
Try out fossilo.com, our angular project to archive complete websites.
What we’ll do:
- generate a simple Angular 4 app
- install the ngx-qrcode2 library in our project
- import the NgxQRCodeModule to our app
- add our target url’s to the app.component.ts
- link to our target url’s in the app.component.html
- start scanning !
- QR-code size
Generate a simple Angular 4 app
You need to have angular-cli in order to follow these exact steps, but you can follow the code without it if you don’t use the ng commands.
ng new qrcode-app —-prefix qra
Install the ngx-qrcode2 library in our project
We now install the library in our project folder and then run a local server to see our app in our default browser.
npm install ngx-qrcode2 --save
ng serve -o
Import the NGXQRCodeModule to our app
We add only two lines of code to access this library:
Add our target url’s to the app.component.ts
In app.component.ts we will need to create variables containing the url of our target, these must be exported in the AppComponent Class:
Link to our target url’s in the app.component.html
We can now use these url’s in the template, and ngx-qrcode2 does the rest of the heavy lifting! The ngx-qrcode tag includes the qrc-element-type which can be
'url' | 'canvas' | 'img' = 'url'
Start scanning !
If you don’t yet have a scanner, you can try this one for Android:
Scan barcodes on products, or Data Matrix and QR Codes containing URLs, contact info, etc. Almost every question and…play.google.com
or this one for iPhone (not tested by us!)
Read reviews, compare customer ratings, see screenshots, and learn more about Free QR Code Reader & Barcode Scanner for…itunes.apple.com
You’ll find that the longer the link you use, the more modules will comprise your QR-code, this is because:
[…] as the amount of data increases, more modules are required to comprise QR Code, resulting in larger QR Code symbols.
We can illustrate this if we add a longer link to app.component.ts and show it in our template, and then also do the same with a shortened url:
The result speaks for itself:
What’s Next? We’ll be looking at other awesome components and brining you short tutorials to get them running in no time !