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
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-svg
Usage
First, import the QRCodeSVGModule
into your consuming module, e.g. into the AppModule
;...
Then you can use the qrcode-svg
tag in your component templates like this:
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;
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:
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