BarcodeGenerator in Angular Barcode component

24 Aug 202515 minutes to read

The BarcodeGenerator component enables you to generate and display various types of barcodes in Angular applications. This component supports multiple barcode symbologies including Code39, Code128, Codabar, and more, with extensive customization options for appearance and formatting.

Code39

Code 39 is a widely-used barcode symbology that supports a specific character set including digits 0-9, uppercase letters A-Z, and special symbols: space, minus (-), plus (+), period (.), dollar sign ($), slash (/), and percent (%). Each barcode includes special start and stop characters at the beginning and end. Code 39 can encode variable-length data, though barcodes with more than 25 characters may become difficult to scan reliably. This symbology is unique as it does not require a checksum for standard applications.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: ` <ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px" height="150px"mode="SVG" type="Code39" value="SYNCFUSION"></ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Code39 Extended

Code 39 Extended is an enhanced version of Code 39 that supports the full ASCII character set. This extended version enables encoding of lowercase letters (a-z) and additional special characters available on standard keyboards, providing greater flexibility for diverse data encoding requirements.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;"  #barcode id="barcode" width="200px"height="150px"mode="SVG"type="Code39Extension"value="SYNCFUSION"><ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Code 11

Code 11 is primarily designed for labeling telecommunications equipment. The character set is limited to digits 0-9, a dash (-), and special start/stop characters. This symbology is commonly used in telecommunications and inventory management applications.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;"  #barcode id="barcode" width="200px"height="150px"mode="SVG"type="Code11"value="112"><ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Codabar

Codabar is a variable-length symbology that encodes 20 specific characters: 0123456789-$:/.+ABCD. The characters A, B, C, and D serve as start and stop characters. This barcode type is extensively used in libraries, blood banks, package delivery services, and various information processing applications due to its reliability and ease of implementation.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;"  #barcode id="barcode" width="200px"height="150px"mode="SVG"type="Codabar"value="123456789"><ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Code 32

Code 32 is specifically designed for pharmaceutical, cosmetics, and dietetics industries. This symbology is commonly used to encode Italian Pharmacode with the following structure:

  • ‘A’ character (ASCII 65) prefix, which is not encoded in the barcode itself
  • 8 digits representing the Pharmacode (typically begins with forward slash and is zero-prefixed if necessary)
  • 1 checksum digit (modulo 10) that is automatically calculated

The input value must be an 8-digit Pharmacode. If the code has fewer than 8 digits, prefix it with zeros. The 9th digit (checksum) is automatically calculated and added by the barcode generator.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px" height="150px"mode="SVG"  type="Code32" value="01234567"></ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Code 93

Code 93 was developed as an improvement over Code 39, offering higher data density and enhanced security features. This continuous, variable-length symbology can represent the entire ASCII character set through character combinations. The standard implementation supports uppercase letters (A-Z), digits (0-9), and special characters including *, -, $, %, (Space), ., /, and +.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px" height="150px"mode="SVG"  type="Code93" value="01234567"></ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Code 93 Extended

Code 93 Extended is a continuous, variable-length, self-checking barcode symbology based on the standard Code 93. The extended version provides full support for all 128 ASCII characters, making it suitable for applications requiring comprehensive character encoding capabilities.

Code 128

Code 128 is a high-density, variable-length, alphanumeric linear barcode symbology capable of encoding the complete 128-character ASCII set and extended character sets. This symbology includes an integrated checksum digit for verification and supports character-by-character validation through parity checking of each data byte.

Code 128 Character Sets

Code 128 utilizes three distinct character sets to optimize encoding efficiency:

  • Code Set A (Character Set A): Includes standard uppercase alphanumeric keyboard characters, punctuation marks, control characters (ASCII values 0-95), and seven special characters
  • Code Set B (Character Set B): Encompasses standard uppercase alphanumeric characters, punctuation marks, lowercase alphabetic characters (ASCII values 32-127), and seven special characters
  • Code Set C (Character Set C): Contains 100 digit pairs from 00-99 plus three special characters, enabling numeric data encoding at twice the density of standard character sets

Code 128 Special Characters

The final seven characters of Code Sets A and B (values 96-102) and the last three characters of Code Set C (values 100-102) are non-data special characters without ASCII equivalents. These characters provide specific instructions to barcode reading devices for enhanced functionality and control.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px" height="150px"mode="SVG" type="Code128" value="SYNCFUSION"></ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing Barcode Color

When barcodes appear on colorful backgrounds or alongside other design elements, color customization becomes essential for maintaining readability and visual harmony. The BarcodeGenerator component provides comprehensive color customization through the foreColor property, allowing you to match your application’s design requirements.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px" foreColor="red" height="150px"mode="SVG" type="Code128" value="SYNCFUSION"></ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing Barcode Dimensions

The physical size of generated barcodes can be precisely controlled using the height and width properties of the BarcodeGenerator component. Proper dimension settings ensure optimal scanning performance while meeting specific layout requirements.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



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

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="300px"  height="300px"mode="SVG" type="Code128" value="SYNCFUSION"></ejs-barcodegenerator>`
})
export class AppComponent {}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing Display Text

The BarcodeGenerator component allows customization of the human-readable text displayed below the barcode using the displayText property. This feature enables you to show custom labels or formatted text while maintaining the encoded data integrity within the barcode itself.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { BarcodeGeneratorAllModule,QRCodeGeneratorAllModule,DataMatrixGeneratorAllModule } from '@syncfusion/ej2-angular-barcode-generator'



import { Component ,ViewChild ,ViewEncapsulation} from "@angular/core";
import { BarcodeGeneratorComponent,DisplayTextModel } from '@syncfusion/ej2-angular-barcode-generator';

@Component({
imports: [
          BarcodeGeneratorAllModule, QRCodeGeneratorAllModule ,DataMatrixGeneratorAllModule 
    ],

providers: [ ],
standalone: true,
  selector: "app-container",
  // specifies the template string for the barcode generator component
  template: `<ejs-barcodegenerator style="display: block;" #barcode id="barcode" width="200px"  height="150px" [displayText] = 'displayText' mode="SVG" type="Code128" value="SYNCFUSION"></ejs-barcodegenerator>`,
})
export class AppComponent {
  //  @ViewChild('barcode')
   @ViewChild('displayText')
   public displayText?: DisplayTextModel;

   ngOnInit(): void {  

     this.displayText = {
       text:'text'
     }
   }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));