angular-qrcode

by monospaced

monospaced /angular-qrcode

QR Code elements for AngularJS.

411 Stars 151 Forks Last release: Not found MIT License 78 Commits 23 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Angular QR Code


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

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

ES2015

import qrcode from 'qrcode-generator';
import ngQrcode from 'angular-qrcode';

// hacks for the browser // if using webpack there is a better solution below window.qrcode = qrcode; require('/node_modules/qrcode-generator/qrcode_UTF8');

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

ES2015 + webpack

Add the following to

webpack.config.js
:
new webpack.ProvidePlugin({
  qrcode: 'qrcode-generator',
})

Import everything, no need for

window
or
require
hacks:
import qrcode from 'qrcode-generator';
import qrcode_UTF8 from '/node_modules/qrcode-generator/qrcode_UTF8';
import ngQrcode from '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-level
defaults to
M
.

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

Usage

as element


with QR options


as a downloadable image


as a link to URL


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

with expressions, observe changes


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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.