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

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)

npm i qrcode-angular

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)

  

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

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.