katharinakoal
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
Installation
To install ngx-qrcode-svg run the following command:
npm i ngx-qrcode-svg
# Or if you use yarn
yarn add ngx-qrcode-svgUsage
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
The word "QR Code" is registered trademark of:
DENSO WAVE INCORPORATED