Syncfusion Angular Barcode

Implementing Barcode Generation

When to Use This Skill

Use this skill when you need to:

• Create linear barcodes (Code39, Code128, Code11, Codabar, Code32, Code93) for product identification and inventory management
• Generate QR codes for URLs, contact info, and quick data sharing
• Encode Data Matrix codes for compact, high-density encoding (healthcare, logistics)
• Customize barcode appearance (colors, dimensions, display text, logos)
• Export barcodes as image files (PNG, JPG) or base64 strings
• Add logos to QR codes for branding and visual enhancement

Important: API Verification Required

API Verification Required: Always verify API class names, properties, and signatures by reading reference files (references/*.md) BEFORE generating code examples. Do not assume or infer class names.

Real-world scenarios:

• Product labeling systems for retail/inventory
• Mobile payment & authentication (QR codes)
• Healthcare/pharmaceutical tracking (Data Matrix)
• Document management & archiving
• Marketing campaigns using branded QR codes

Component Overview

The Syncfusion Angular Barcode Generator supports three barcode families with extensive customization:

Barcode Types

Key Capabilities

• ✅ 7 linear barcode types with symbol validation
• ✅ Full customization (colors, dimensions, fonts, margins)
• ✅ Logo support for QR codes via QRCodeLogo
• ✅ Multiple export formats (PNG, JPG, Base64)
• ✅ Automatic version selection for QR codes
• ✅ Display text customization below barcodes

Documentation & Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Installation & package setup (@syncfusion/ej2-angular-barcode-generator)
• Ivy vs ngcc package selection
• Basic component setup & imports
• Creating first Code128 barcode & QR code
• Project configuration & CSS

Linear Barcodes (Code39, Code128, etc.)

📄 Read: references/linear-barcodes.md

• Code39 (standard alphanumeric)
• Code39 Extended (full ASCII support)
• Code128 (high-density encoding with 3 character sets)
• Code11 (telecommunications)
• Codabar (libraries, blood banks)
• Code32 (pharmaceutical/cosmetics)
• Code93 & Code93 Extended
• Character set limitations & validation
• When to choose each type

QR Codes

📄 Read: references/qr-codes.md

• QR code versions (1-40) & capacity
• Basic QR code generation
• Color customization (foreColor, backgroundColor)
• Dimension control (width, height)
• Display text below QR code
• Adding logos & icons (QRCodeLogo with imageSource)
• Logo positioning & sizing
• Image sources (local files, URLs, base64)
• Error correction levels

Data Matrix Codes

📄 Read: references/data-matrix-barcodes.md

• Data Matrix overview & advantages
• Use cases (healthcare, logistics, compact encoding)
• Square vs rectangular symbols
• Dimension customization
• Color & appearance options
• Display text configuration
• When to use vs QR codes

Customization & Styling

📄 Read: references/customization.md

• Shared customization properties (all barcode types)
• Color customization (foreColor, backgroundColor)
• Dimensions & scaling (width, height)
• Margins & padding
• Display text properties & positioning
• CSS class customization
• Responsive barcode sizing
• Advanced styling across all types

Exporting Barcodes

📄 Read: references/exporting-barcodes.md

• Export as image file (PNG, JPG)
• Export as base64 string
• Download functionality & file naming
• Integration with backend systems
• Use cases (printing, storage, sharing)

Quick Start Example

Basic Code128 Barcode

<!-- app.component.html -->
<ejs-barcodegenerator 
  #barcode
  type="Code128" 
  value="123456789" 
  width="200px" 
  height="150px">
</ejs-barcodegenerator>

// app.component.ts
import { Component } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

QR Code with Custom Color

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com" 
  [foreColor]="'#FF0000'"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Common Patterns

Pattern 1: Choose Barcode Type by Use Case

User needs to encode:

• Product/inventory? → Code128 (high-density, retail standard)
• Legacy system? → Code39 (widely supported)
• Pharmaceutical? → Code32 (industry standard)
• URL/contact? → QR Code (compact, mobile-friendly)
• Small label? → Data Matrix (high-density, space-efficient)

Pattern 2: Customize for Different Backgrounds

// Light background
@barcode type="Code128" foreColor="#000000" backgroundColor="#FFFFFF"

// Dark background
@barcode type="Code128" foreColor="#FFFFFF" backgroundColor="#000000"

// Branded QR code
@barcode type="QRCode" [qRCodeLogo]="logoConfig" foreColor="#1976D2"

Pattern 3: Export & Download

export class BarcodeComponent {
  @ViewChild('barcode') barcode: BarcodeGeneratorComponent;
  
  downloadBarcode() {
    this.barcode.exportImage('barcode','PNG');
  }

  getBase64() {
    const base64String = this.barcode.toDataURL('image/png');
    // Send to server or store
  }
}

Pattern 4: Branded QR Codes with Logo

<ejs-barcodegenerator 
  type="QRCode" 
  value="https://mysite.com"
  #qrCode>
</ejs-barcodegenerator>

export class BrandedQRComponent implements OnInit {
  @ViewChild('qrCode') qrCode: BarcodeGeneratorComponent;
  
  ngOnInit() {
    (this.qrCode.qrcodelogo as QRCodeLogo) = {
      imageSource: 'assets/logo.svg',
      width: 50,
      height: 50
    };
  }
}

Key Props Summary

Common Use Cases

Use Case 1: Retail Product Labeling System

// Create multiple product barcodes with customization
products.forEach(product => {
  <ejs-barcodegenerator 
    type="Code128"
    [value]="product.sku"
    [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
    foreColor="#333333"
    width="150px"
    height="100px">
  </ejs-barcodegenerator>
});

Use Case 2: Mobile QR Code with Branding

// QR code for app promotion with branded logo
<ejs-barcodegenerator 
  type="QRCode"
  value="https://appstore.com/myapp"
  [qRCodeLogo]="{ imageSource: 'assets/app-icon.png', width: 40, height: 40 }"
  [foreColor]="'#1976D2'"
  width="250px"
  height="250px">
</ejs-barcodegenerator>

Use Case 3: Healthcare Tracking with Data Matrix

// Compact Data Matrix for pharmaceutical packaging
<ejs-barcodegenerator 
  type="DataMatrix"
  [value]="medicineTrackingCode"
  [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
  width="80px"
  height="80px">
</ejs-barcodegenerator>

Next Steps

• Start with getting-started.md to install the package
• Choose your barcode type guide based on use case
• Customize using customization.md
• Export barcodes using exporting-barcodes.md