New to Kendo UI for AngularStart a free 30-day trial

QRCodeComponent

Represents the Kendo UI QR Code component for Angular.

Shows a QR Code for the provided value.

ts
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 {
}

Selector

kendo-qrcode

Export Name

Accessible in templates as #kendoQRCodeInstance="kendoQRCode"

Inputs

NameTypeDefaultDescription

background?

string

"white"

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

border?

Border

Sets the border of the QR Code.

color?

string

"black"

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

encoding?

QRCodeEncoding

"ISO_8859_1"

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.

errorCorrection?

QRCodeErrorCorrection

"L"

Sets the error correction level.

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

0

Sets the padding for the QR Code in pixels.

renderAs?

RenderMode

"svg"

Sets the rendering mode for the QR Code.

resizeRateLimit

number

10

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.

size?

string | number

"200px"

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.

value

string | number

Sets the value to encode in the QR Code.

Methods

exportImage

Exports the component as an image. The export operation is asynchronous and returns a promise.

Parameters

options

ImageExportOptions

The parameters for the exported image.

Returns

Promise<string>

  • A promise that will be resolved with a PNG image encoded as a Data URI.

exportSVG

Exports the component as an SVG document. The export operation is asynchronous and returns a promise.

Parameters

options

SVGExportOptions

The parameters for the exported file.

Returns

Promise<string>

  • A promise that will be resolved with an SVG document that is encoded as a Data URI.

exportVisual

Exports the component as a Drawing Group.

Returns

Group

  • The exported Group.

resize

Detects the size of the container and redraws the component. Resizing is automatic unless you set the resizeRateLimit option to 0.

In this article
SelectorExport NameInputsMethods
Not finding the help you need?
Contact Support