[DEPRECATED] Angular QR Code

Since AngularJS support has been discontinued this package is deprecated and no longer maintained.

---

<qrcode></qrcode>

An AngularJS directive to create QR Codes using Kazuhiko Arase’s qrcode-generator library.

See it in action.

Installation

npm install angular-qrcode

Script elements

<scriptsrc="/node_modules/qrcode-generator/qrcode.js"></script><scriptsrc="/node_modules/qrcode-generator/qrcode_UTF8.js"></script><scriptsrc="/node_modules/angular-qrcode/angular-qrcode.js"></script>

angular.module('your-module',['monospaced.qrcode',]);

ES2015

importqrcodefrom'qrcode-generator';importngQrcodefrom'angular-qrcode';// hacks for the browser// if using webpack there is a better solution belowwindow.qrcode=qrcode;require('/node_modules/qrcode-generator/qrcode_UTF8');angular.module('your-module',[ngQrcode,]);

ES2015 + webpack

Add the following to webpack.config.js:

newwebpack.ProvidePlugin({qrcode: 'qrcode-generator',})

Import everything, no need for window or require hacks:

importqrcodefrom'qrcode-generator';importqrcode_UTF8from'/node_modules/qrcode-generator/qrcode_UTF8';importngQrcodefrom'angular-qrcode';angular.module('your-module',[ngQrcode,]);

Important!

Version and Error Correction

The amount of data a qrcode can contain is impacted by its version and error-correction-level.

version designates the density of the encoding. If it isn't specifed, it defaults to 5. If the version specified is too small to contain the data given, the next highest version will be tried automatically.

The maximum supported version is 40, and error-correction-leveldefaults to M.

For more information see http://www.qrcode.com/en/about/version.html.

Usage

as element

<qrcodedata="string"></qrcode>

with QR options

<qrcodedata="string" version="2" error-correction-level="Q" size="200" color="#fff" background="#000"></qrcode>

as a downloadable image

<qrcodedata="string" download></qrcode>

as a link to URL

<qrcodedata="http://example.com" href="http://example.com"></qrcode>

download and href can’t be used on the same element (if download is present, href will be ignored)

with expressions, observe changes

<qrcodeversion="{{version}}" error-correction-level="{{level}}" size="{{size}}" data="{{var}}" href="{{var}}" color="{{color}}" background="{{background}}" download></qrcode>

Options

Permitted values

• version: 1–40 (default: 5) - if required, will be auto-incremented to contain data given

• error-correction-level: L, M, Q, H (default: M)

• size: integer (default: size is calculated automatically)

• download: boolean (default: false)

• href: url as string

• color: hex as string (default: #000)

• background: hex as string (default: #fff)

The amount of data (measured in bits) must be within capacity according to the version and error correction level, see http://www.qrcode.com/en/about/version.html.

Demo

monospaced.github.io/angular-qrcode

Reference

QR Code versions

QR Code error correction