• 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 / BarcodeComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

BarcodeComponent

Represents the Kendo UI Barcode component for Angular.

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

NameTypeDefaultDescription

background?

string

"white"

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

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.

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.

@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.

@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.

@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.

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.
@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.

@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.

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.

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.

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.

@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.

In this article

Not finding the help you need?

Contact Support