BarcodeComponent

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

Copy Codeimport { Component } from '@angular/core';

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

The border of the Barcode.

Copy Codeimport { 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
    };
}

If set to true, the Barcode will display the checksum digit next to the value in the text area.

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

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

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

The height of the Barcode in pixels.

The Barcode dimensions can also be set through regular CSS styling.

Copy Code@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: 200px; height: 100px;">
       </kendo-barcode>
   `
})
export class AppComponent {
}

The padding of the Barcode. A numeric value sets all paddings.

Copy Codeimport { 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
    };
}

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.

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

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.

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

The Barcode text label configuration.

Copy Codeimport { 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'
    };
}

The symbology (encoding) the Barcode will use.

Copy Codeimport { Component } from '@angular/core';

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

The value of the Barcode.

Copy Codeimport { Component } from '@angular/core';

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

The width of the Barcode in pixels.

The Barcode dimensions can also be set through regular CSS styling.

Copy Code@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: 200px; height: 100px;">
       </kendo-barcode>
   `
})
export class AppComponent {
}