Angular QR Code

<qrcode></qrcode>

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

See it in action.

Usage

as element

<qrcode data="string"></qrcode>

with QR options

<qrcode version="2" error-correction-level="M" size="200" data="string"></qrcode>

The amount of data that a qrcode can contain is impacted by the version and the error-correction-level. version designates the density of the encoding. If it isn't specified, it defaults to 4. If the version specified is too small to contain the data that was given, the next highest version will be tried automatically. The maximum version supported is 10.

as a downloadable image

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

as a link to URL

<qrcode data="http://example.com" href="http://example.com" target="_new"></qrcode>

download and href can’t be used on the same element (if download is present, href will be ignored) target is optional. If it is supplied, it will be applied to the element that wraps the qrcode canvas.

with expressions, observe changes

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

Options

Permitted values

• version: 1-10

• error-correction-level: 'L', 'M', 'Q', 'H'

• size: integer

• download: boolean

• href: URL

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

Install

bower install monospaced/angular-qrcode

npm install angular-qrcode

Include the qrcode generator library and the angular-qrcode.js script provided by this component in your app, and add monospaced.qrcode to your app’s dependencies.

Demo

monospaced.github.io/angular-qrcode

Reference

QR Code versions

QR Code error correction