Miss any of our Open RFC calls?Watch the recordings here! »

ngx-qrcode-svg

2.0.0 • Public • Published

CI/CD codecov MIT commitizen PRs styled with prettier semantic-release npm

ngx-qrcode-svg

Angular component library to generate QR codes with SVG rendering.

Table of Contents

Features

  • Scalable high-quality QR code rendering
  • Responsive layout fills the containing element
  • Customizable with plain css or CSS Color Values

Quick example

<qrcode-svg value="The content you want show as QR code"></qrcode-svg>

Demo

See running demo here

Installation

To install ngx-qrcode-svg run the following command:

npm i ngx-qrcode-svg
# Or if you use yarn 
yarn add ngx-qrcode-svg

Usage

First, import the QRCodeSVGModule into your consuming module, e.g. into the AppModule

import { QRCodeSVGModule } from 'ngx-qrcode-svg';
...
 
@NgModule({
    ...
    imports[ QRCodeSVGModule ],
    ...
})

Then you can use the qrcode-svg tag in your component templates like this:

<qrcode-svg
  [value]="qrCodeValue"
  [errorCorrectionLevel]="errorCorrectionLevel"
  [margin]="margin"
  [color]="color"
  [backgroundColor]="backgroundColor"
></qrcode-svg>

Bindings

The qrcode-svg component supports the following bindings:

  • value: string (required)
    • the content you want to display as QR code
  • errorCorrectionLevel: string (optional, default: 'Q')
    • error correction capability controls the amount of redundant information to restore data if the code is dirty or damaged
    • Valid values: 'L', 'M', 'Q', 'H'
    • If you need the type you can
      import { ErrorCorrectionLevel } from 'ngx-qrcode-svg';
  • margin: number | string (optional, default: 4)
    • the margin is a clear area around a symbol where nothing is printed.
  • color: string (optional, default: 'currentcolor')
  • backgroundColor: string (optional, default: 'transparent')

Set colors with plain css

If you don't pass explicit values to the color or backgroundColor inputs of this component, you can style your QR code with regular css like this:

<qrcode-svg class="qrcode" value="The content you want show as QR code"></qrcode-svg>
.qrcode {
  color: black;
  background: white;
}

Credits

This library is based on the node-qrcode package and inspired by the excellent angularx-qrcode library, which I highly recommend if you need other QR code output formats than SVG in your Angular applications.

License

MIT

The word "QR Code" is registered trademark of:
DENSO WAVE INCORPORATED

Install

npm i ngx-qrcode-svg

DownloadsWeekly Downloads

42

Version

2.0.0

License

MIT

Unpacked Size

69 kB

Total Files

20

Last publish

Collaborators

  • avatar