Need help with angular-qrcode?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

monospaced
411 Stars 150 Forks MIT License 78 Commits 17 Opened issues

Description

QR Code elements for AngularJS.

Services available

!
?

Need anything else?

Contributors list

No Data

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.