ngx-qrcode-svg

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

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