BarcodeComponent

Represents the Kendo UI Barcode component for Angular.

ts

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

@Component({
   selector: 'my-app',
   template: `
       <kendo-barcode type="EAN8" value="1234567">
       </kendo-barcode>
   `
})
export class AppComponent {
}

Selector

kendo-barcode

Export Name

Accessible in templates as #kendoBarcodeInstance="kendoBarcode"

Inputs

Name	Type	Default	Description
background?	string	"white"	The background color of the Barcode. Accepts a valid CSS color string, including hex and rgb. ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" background="#fc0"> </kendo-barcode> ` }) export class AppComponent { }
border?	Border		The border of the Barcode. ts import { Component } from '@angular/core'; import { Border } from '@progress/kendo-angular-barcodes'; @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" [border]="barcodeBorder" [padding]="5"> </kendo-barcode> ` }) export class AppComponent { barcodeBorder: Border = { color: '#fc0', width: 2 }; }
checksum?	boolean	false	If set to true, the Barcode will display the checksum digit next to the value in the text area. ts @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" [checksum]="true"> </kendo-barcode> ` }) export class AppComponent { }
color?	string	"black"	The color of the Barcode. Accepts a valid CSS color string, including hex and rgb. ts @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" color="#fc0"> </kendo-barcode> ` }) export class AppComponent { }
height?	number		The height of the Barcode in pixels. The Barcode dimensions can also be set through regular CSS styling. ts @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" [width]="200" [height]="100"> </kendo-barcode> <kendo-barcode type="EAN8" value="1234567" [style.width.px]="200" [style.height.px]="100"> </kendo-barcode> ` }) export class AppComponent { }
padding?	number | Padding	0	The padding of the Barcode. A numeric value sets all paddings. ts import { Component } from '@angular/core'; import { Padding } from '@progress/kendo-angular-barcodes'; @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" [padding]="5" background="#fc0"> </kendo-barcode> <kendo-barcode type="EAN8" value="1234567" [padding]="barcodePadding" background="#cf0"> </kendo-barcode> ` }) export class AppComponent { barcodePadding: Padding = { top: 20, bottom: 10, left: 5, right: 5 }; }
renderAs?	RenderMode	"svg"	Sets the preferred rendering mode of the Barcode. The supported values are: "canvas"—Renders the component as a Canvas element. "svg"—Renders the component as an inline SVG document. ts @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" renderAs="canvas"> </kendo-barcode> ` }) export class AppComponent { }
resizeRateLimit	number		Limits the automatic resizing of the Barcode. 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. ts @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" [value]="1234567" [resizeRateLimit]="2"> </kendo-barcode> ` }) export class AppComponent { }
text?	BarcodeText		The Barcode text label configuration. ts import { Component } from '@angular/core'; import { BarcodeText } from '@progress/kendo-angular-barcodes'; @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" [text]="barcodeText"> </kendo-barcode> ` }) export class AppComponent { barcodeText: BarcodeText = { color: '#fc0', font: '20px monospace' }; }
type	BarcodeType	"Code39"	The symbology (encoding) the Barcode will use. ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN13" value="123456789987"> </kendo-barcode> ` }) export class AppComponent { }
value	string | number		The value of the Barcode. ts import { Component } from '@angular/core'; @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN13" value="123456789987"> </kendo-barcode> ` }) export class AppComponent { }
width?	number		The width of the Barcode in pixels. The Barcode dimensions can also be set through regular CSS styling. ts @Component({ selector: 'my-app', template: ` <kendo-barcode type="EAN8" value="1234567" [width]="200" [height]="100"> </kendo-barcode> <kendo-barcode type="EAN8" value="1234567" [style.width.px]="200" [style.height.px]="100"> </kendo-barcode> ` }) 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.