ng-qrcode-svg

Simple QR code generator (SVG only) for Angular

Install 🌐

npm install ng-qrcode-svg

Demo ‍🧑‍💻

You can test it here:

https://projects.web-timo.de/preview/ng-qrcode-svg

Usage 🔥

1. Import module QrcodeSvgModule

import {NgModule} from '@angular/core';
import {QrcodeSvgModule} from 'ng-qrcode-svg';

@NgModule({
    imports: [
        QrcodeSvgModule // import QrcodeSvgModule
    ]
})
export class MyModule {
}

2. Use the qrcode-svg component which will render a QR code in SVG format

<qrcode-svg value="hello world!"></qrcode-svg>

Component Properties

Name	Description	Default
@Input() value: string	The value which need to be encoded	undefined
@Input() ecl: 'low' | 'medium' | 'quartile' | 'high'	Error correction level	medium
@Input() borderSize: number	The padding between the edge and the QR code (quiet zone)	2
@Input() size: string | number	The size of the QR code SVG (css format)	250px
@Input() backgroundColor: string	The 'path' color (background)	#FFFFFF
@Input() foregroundColor: string	The 'rect' color (foreground)	#000000
@Input() alt: string | undefined	HTML alt attribute	undefined
@Input() ariaLabel: string | undefined	HTML aria-label attribute	undefined

---

@larscom/ng-qrcode-svg

This is a renewed variant of the @larscom/ng-qrcode-svg. This runs on Angular 16 and Ivy. I personally use the library, and it is therefore regularly maintained.

You can find more information in the original project: github.com/larscom/ng-qrcode-svg