QRCode

When To Use#

Used when the link needs to be converted into a QR Code.

Import Module#

import { NzQRCodeModule } from 'ng-zorro-antd/qr-code';

Examples

Basic

The simplest usage.

expand codeexpand code
      Loading...

QR code expired

Scanned

Other Status

The status can be controlled by the value nzStatus, four values of active, expired, loading, scanned are provided.

expand codeexpand code
      Loading...
With padding

Customize the padding of the QR Code.

expand codeexpand code
      Loading...
With custom background color

Customize the background color of the QR Code.

expand codeexpand code
      Loading...
Download QRCode

A way to download QRCode.

expand codeexpand code
      Loading...
With Icon

QRCode with icon.

expand codeexpand code
      Loading...
NgZorro
success
custom status

You can control the rendering logic of the QR code in different states through the value of nzStatusRender.

expand codeexpand code
      Loading...
Custom Color

Customize QR code color.

expand codeexpand code
      Loading...
Error Level

Set Error Level.

expand codeexpand code
      Loading...

API#

nz-qrcode#

PropertyDescriptionTypeDefault
[nzValue]scanned linkstring-
[nzColor]QR code Colorstring#000
[nzBgColor]QR code background colorstring#FFFFFF
[nzSize]QR code Sizenumber160
[nzPadding]QR code Paddingnumber | number[]0
[nzIcon]Icon address in QR codestring-
[nzIconSize]The size of the icon in the QR codenumber40
[nzBordered]Whether has border stylebooleantrue
[nzStatus]QR code status'active'｜'expired' ｜'loading'active
[nzStatusRender]custom statusTemplateRef<void> | string-
[nzLevel]Error Code Level'L'｜'M'｜'Q'｜'H'M
(nzRefresh)callbackEventEmitter<string>-

Note#

Invalid QR Code#

nzValue has a conservative upper limit of 738 or fewer strings. If error correction levels are used, the nzValue 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. When the content encoding of the QR code carries less information, in other words, when the value link is short, set different error correction levels, and the generated image will not change.

For more information, see the: https://www.qrcode.com/en/about/error_correction