New to Kendo UI for Angular? Start a free 30-day trial

QRCodeComponent

Component

Represents the Kendo UI QR Code component for Angular.

Shows a QR Code for the provided value.

Definition

Package:@progress/kendo-angular-barcodes

Selector:kendo-qrcode

Export Name:Accessible in templates as #kendoQRCodeInstance="kendoQRCode"

Syntax:

import { Component } from '@angular/core';

@Component({
   selector: 'my-app',
   template: `
       <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui">
       </kendo-qrcode>
   `
})
export class AppComponent {
}

Inputs

background?

string

Sets the background color of the QR Code. Accepts any valid CSS color string, such as hex or rgb.

Default:

"white"

border?

Border

Sets the border of the QR Code.

color?

string

Sets the color of the QR Code. Accepts any valid CSS color string, such as hex or rgb.

Default:

"black"

encoding?

QRCodeEncoding

Sets the encoding mode for the value.

Important The UTF-8 encoding is not part of the specifications and some readers may not support it.

Default:

"ISO_8859_1"

errorCorrection?

QRCodeErrorCorrection

Sets the error correction level.

Default:

"L"

overlay?

QRCodeOverlay

Sets an optional image overlay to display over the QR Code.

Note Always test if the code scans correctly with the overlay. If needed, increase the errorCorrection level to "M" or "H".

padding?

number

Sets the padding for the QR Code in pixels.

Default:

renderAs?

RenderMode

Sets the rendering mode for the QR Code.

Default:

"svg"

resizeRateLimit

number

Limits how often the QR Code resizes automatically. Sets the maximum redraws per second when the container size changes. Set to 0 to disable automatic resizing.

Default:

size?

string | number

Sets the size of the QR Code. Numeric values are in pixels.

If no size is specified, the size will be determined from the element width and height. If the element has width or height of zero, a default value of 200 pixels will be used.

Default:

"200px"