Create QR codes with ngx-qrcode2

Today we’re going to learn how to use the awesome ngx-qrcode2 library from techiediaries.

Sponsored by letsboot.com
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:

  1. generate a simple Angular 4 app
  2. install the ngx-qrcode2 library in our project
  3. import the NgxQRCodeModule to our app
  4. add our target url’s to the app.component.ts
  5. link to our target url’s in the app.component.html
  6. start scanning !
  7. 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.

cd qrcode-app
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:

or this one for iPhone (not tested by us!)

QR-code size

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.

An easy way around that if you need a constant size is to use a url-shortener, you can try any but https://goo.gl/ or https://bitly.com/ are common.

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:

Long vs Short url resulting in a different module count in the QR-code

Et voilà ! Happy coding and follow me on twitter, medium, and LinkedIn for more, also check out letsboot.com for more great content!

I also want to say that I hope this article brings more visibility to the @techiediaries for his awesome ngx-qrcode2 work, he also wrote a great tutorial. Kudos to @techiediaries for his great work!

What’s Next? We’ll be looking at other awesome components and brining you short tutorials to get them running in no time !