• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Barcodes / API / QRCodeComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

QRCodeComponent

Represents the Kendo UI QR Code component for Angular.

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"

The background color of the QR Code. Accepts a valid CSS color string, including hex and rgb.

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

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

border?

Border

The border of the QR Code.

import { Component } from '@angular/core';
import { Border } from '@progress/kendo-angular-barcodes';

@Component({
   selector: 'my-app',
   template: `
       <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
                     [border]="qrcodeBorder" [padding]="5">
       </kendo-qrcode>
   `
})
export class AppComponent {
    qrcodeBorder: Border = {
        color: '#fc0',
        width: 2
    };
}

color?

string

"black"

The color of the QR Code. Accepts a valid CSS color string, including hex and rgb.

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

encoding?

QRCodeEncoding

"ISO_8859_1"

The encoding mode used to encode the value.

Important The UTF-8 encoding is not included in the specifications and is not supported by all readers.

The possible values are:

  • "ISO_8859_1"—Supports all characters from the ISO/IEC 8859-1 character set.
  • "UTF_8"—Supports all Unicode characters.
@Component({
   selector: 'my-app',
   template: `
       <kendo-qrcode value="АБВ" encoding="UTF_8">
       </kendo-qrcode>
   `
})
export class AppComponent {
}

errorCorrection?

QRCodeErrorCorrection

"L"

The error correction level to use.

The possible values are:

  • "L"—Approximately 7% of the codewords can be restored.
  • "M"—Approximately 15% of the codewords can be restored.
  • "Q"—Approximately 25% of the codewords can be restored.
  • "H"—Approximately 30% of the codewords can be restored.
@Component({
   selector: 'my-app',
   template: `
       <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
                     errorCorrection="Q">
       </kendo-qrcode>
   `
})
export class AppComponent {
}

overlay?

QRCodeOverlay

An optional image overlay that will placed over the QR Code.

Note Always test if the code reads correctly with the applied overlay. Depending on the length of the value and the size of the overlay, you might need to raise the errorCorrection level to "M" or "H".

import { QRCodeOverlay } from '@progress/kendo-angular-barcodes';

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

padding?

number

0

The padding of the QR Code. The value sets all paddings in pixels.

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

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

renderAs?

RenderMode

"svg"

Sets the preferred rendering mode of the QR Code.

The supported values are:

  • "canvas"—Renders the component as a Canvas element.
  • "svg"—Renders the component as an inline SVG document.
@Component({
   selector: 'my-app',
   template: `
       <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
                     renderAs="canvas">
       </kendo-qrcode>
   `
})
export class AppComponent {
}

resizeRateLimit

number

Limits the automatic resizing of the QR Code. Sets the maximum number of times per second that the component redraws its content when the size of its container changes. Defaults to 10. To disable the automatic resizing, set it to 0.

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

size?

string | number

"200px"

Specifies the size of a QR Code. Numeric values are treated as 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.

@Component({
   selector: 'my-app',
   template: `
       <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
                     [size]="200">
       </kendo-qrcode>

       <kendo-qrcode value="https://www.telerik.com/kendo-angular-ui"
                     [style.width.px]="200" [style.height.px]="200">
       </kendo-qrcode>
   `
})
export class AppComponent {
}

value

string | number

The value of the QR Code.

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

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

Not finding the help you need?

Contact Support