ngx-qrcode-svg

Angular component library to generate QR codes with SVG rendering.

Table of Contents

• Features
• Quick example
• Demo
• Installation
• Usage
• Credits
• License

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')
  • color of the dark squares
  • you can provide any CSS Color Value
• backgroundColor: string (optional, default: 'transparent')
  • color of the light squares
  • you can provide any CSS Color Value

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