qrcode-angular

A angular component to generate QR codes for rendering to the DOM.

Introduction

angular 17 changed to standalone component

Support canvas and svg two formats

Support adding QR code logo

Angular version >= 17

17 > Angular version >= 14 (npm 1.2.0)

Installation

npm i qrcode-angular

Usage

import { QrcodeComponent } from 'qrcode-angular';

<qrcode value="https://angular.io/"></qrcode>
<qrcode mode='svg' value="https://angular.io/"></qrcode>
<qrcode value="https://angular.io/" icon="imgUrl"></qrcode>
<qrcode value="https://angular.io/" errorLevel="H"></qrcode>

• basic

  

• icon

  

• color

  

• errorLevel(H)

  

API

prop	type	default value	note
mode	'canvas'｜'svg'	'canvas'	output mode
value	string	-	scanned link
color	{ dark: string, light: string }	{ dark: '#000', light: '#fff' }	QR code Color
size	number	160	QR code Size
icon	string	-	QR code include logo url
iconSize	number	40	QR code include logo size
errorLevel	'L'｜'M'｜'Q'｜'H'	M	Error Code Level

Notice

Invalid QR Code

value has a conservative upper limit of 738 or fewer strings. If error correction levels are used, the value upper limit will be lowered.

QR Code error correction level

The ErrorLevel means that the QR code can be scanned normally after being blocked, and the maximum area that can be blocked is the error correction rate.

Generally, the QR code is divided into 4 error correction levels: Level L can correct about 7% errors, Level M can correct about 15% errors, Level Q can correct about 25% errors, and Level H can correct about 30% errors.

qrcode-angular bundles the qrcodegen, which is available under the MIT license.