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 { QrcodeModule } 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.