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

Customization & Styling

Table of Contents

• Shared Properties
• Color Customization
• Size & Dimensions
• Margins & Padding
• Display Text Customization
• CSS Class Customization
• Rendering Mode
• Responsive Design

---

Shared Properties

All barcode types (linear, QR, Data Matrix) support common customization properties:

---

Color Customization

Foreground Color (Barcode Modules)

The foreground color defines the color of the barcode bars/modules.

<!-- Black (default) -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  foreColor="#000000">
</ejs-barcodegenerator>

<!-- Blue branding -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  foreColor="#1976D2">
</ejs-barcodegenerator>

<!-- Named color -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  foreColor="navy">
</ejs-barcodegenerator>

Background Color (Canvas Surface)

The background color defines the canvas behind the barcode.

<!-- White background (default) -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  backgroundColor="#FFFFFF">
</ejs-barcodegenerator>

<!-- Light gray background -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  backgroundColor="#F5F5F5">
</ejs-barcodegenerator>

<!-- Dark background -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  foreColor="#FFFFFF"
  backgroundColor="#1a1a1a">
</ejs-barcodegenerator>

Color Themes Component

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

@Component({
  selector: 'app-color-themes',
  template: `
    <div>
      <button (click)="setTheme('standard')">Standard</button>
      <button (click)="setTheme('brand')">Brand</button>
      <button (click)="setTheme('dark')">Dark Mode</button>

      <ejs-barcodegenerator 
        type="Code128" 
        value="123456789"
        [foreColor]="foreColor"
        [backgroundColor]="backgroundColor"
        width="250px" 
        height="150px">
      </ejs-barcodegenerator>
    </div>
  `
})
export class ColorThemesComponent {
  foreColor = '#000000';
  backgroundColor = '#FFFFFF';

  setTheme(theme: string) {
    const themes: { [key: string]: { fg: string; bg: string } } = {
      standard: { fg: '#000000', bg: '#FFFFFF' },
      brand: { fg: '#1976D2', bg: '#E3F2FD' },
      dark: { fg: '#FFFFFF', bg: '#2a2a2a' }
    };

    if (themes[theme]) {
      this.foreColor = themes[theme].fg;
      this.backgroundColor = themes[theme].bg;
    }
  }
}

Color Contrast Requirements

✅ Required for scanning:

• High contrast between foreground and background
• Minimum contrast ratio of 4.5:1 (WCAG AA standard)
• Example: Black (#000000) on White (#FFFFFF) → Contrast: 21:1 ✅

❌ Problematic combinations:

• Light gray (#E0E0E0) on white (#FFFFFF) → Contrast: 1.3:1 ❌
• Dark blue (#1976D2) on dark purple (#6A1B9A) → No scanning ❌

RGB Hex Color Reference

// Common professional colors
const colors = {
  // Neutral
  black: '#000000',
  white: '#FFFFFF',
  darkGray: '#333333',
  lightGray: '#F5F5F5',
  
  // Brand colors
  blue: '#1976D2',
  green: '#4CAF50',
  red: '#F44336',
  orange: '#FF9800',
  
  // Dark theme
  darkBG: '#1a1a1a',
  darkText: '#FFFFFF'
};

---

Size & Dimensions

Width & Height Properties

<!-- Specify both width and height (square) -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

<!-- Rectangular barcode -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  width="300px" 
  height="100px">
</ejs-barcodegenerator>

<!-- Percentage-based sizing -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  width="80%" 
  height="120px">
</ejs-barcodegenerator>

Size Guidelines by Type

Responsive Sizing

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'app-responsive-barcode',
  template: `
    <ejs-barcodegenerator 
      type="Code128" 
      value="RESPONSIVE-BARCODE"
      [width]="barcodeWidth" 
      [height]="barcodeHeight">
    </ejs-barcodegenerator>
  `
})
export class ResponsiveBarcodeComponent implements OnInit {
  barcodeWidth = '200px';
  barcodeHeight = '100px';

  @HostListener('window:resize', ['$event'])
  onResize(event: any) {
    this.updateSize();
  }

  ngOnInit() {
    this.updateSize();
  }

  updateSize() {
    const width = window.innerWidth;
    if (width < 480) {
      this.barcodeWidth = '100px';
      this.barcodeHeight = '50px';
    } else if (width < 768) {
      this.barcodeWidth = '150px';
      this.barcodeHeight = '75px';
    } else {
      this.barcodeWidth = '200px';
      this.barcodeHeight = '100px';
    }
  }
}

---

Margins & Padding

Margin Property

Add space around the barcode using the margin property:

<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  [margin]="{ left: 10, right: 10, top: 10, bottom: 10 }"
  width="200px" 
  height="100px">
</ejs-barcodegenerator>

Component with Margins

export class MarginsComponent {
  marginConfig = {
    left: 15,    // Left margin in pixels
    right: 15,   // Right margin in pixels
    top: 10,     // Top margin in pixels
    bottom: 20   // Bottom margin (extra space for text)
  };
}

CSS-based Spacing

/* app.component.css */
ejs-barcodegenerator {
  display: block;
  padding: 20px;           /* Space inside container */
  margin: 10px 0;          /* Space outside container */
  border: 1px solid #ddd;  /* Border around */
}

---

Display Text Customization

Basic Display Text

<ejs-barcodegenerator 
  type="Code128" 
  value="SKU123456789"
  [displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
  width="250px" 
  height="150px">
</ejs-barcodegenerator>

Dynamic Display Text

export class DynamicTextComponent {
  barcodeValue = 'PROD-001';

  displayLabel = {
    text: 'Product Code',
    visibility: true
  };

  updateLabel(newLabel: string) {
    this.displayLabel = {
      text: newLabel,
      visibility: true
    };
  }
}

<ejs-barcodegenerator 
  type="Code128" 
  [value]="barcodeValue"
  [displayText]="displayLabel"
  width="200px" 
  height="100px">
</ejs-barcodegenerator>

Display Text Examples

// Product barcode
displayText = { text: 'SKU: 123456789', visibility: true };

// QR code marketing
displayText = { text: 'Scan to Download App', visibility: true };

// Tracking barcode
displayText = { text: 'Package ID: TRK-2026-001', visibility: true };

// Medical / Pharma
displayText = { text: 'BATCH: 789 | EXP: 2028-06', visibility: true };

// Inventory
displayText = { text: 'Warehouse Location: A-15-02', visibility: true };

---

CSS Class Customization

Container Styling

/* Style the barcode container */
ejs-barcodegenerator {
  display: block;
  padding: 20px;
  background-color: #f9f9f9;
  border: 2px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Angular Component Styling

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

@Component({
  selector: 'app-styled-barcode',
  template: `
    <div class="barcode-wrapper">
      <ejs-barcodegenerator 
        class="barcode-item"
        type="Code128" 
        value="STYLED-BARCODE"
        width="200px" 
        height="100px">
      </ejs-barcodegenerator>
    </div>
  `,
  styles: [`
    .barcode-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 30px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .barcode-item {
      display: flex;
      justify-content: center;
    }
  `]
})
export class StyledBarcodeComponent {}

Print-Friendly Styling

@media print {
  ejs-barcodegenerator {
    display: block;
    width: 100%;
    margin: 10mm 0;
    page-break-inside: avoid;
  }

  /* Ensure scannable resolution */
  .barcode-print {
    width: 80mm;
    height: 50mm;
  }
}

---

Rendering Mode

SVG vs Canvas Rendering

<!-- SVG rendering (default, recommended) -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  mode="SVG"
  width="200px" 
  height="100px">
</ejs-barcodegenerator>

<!-- Canvas rendering (alternative) -->
<ejs-barcodegenerator 
  type="Code128" 
  value="123456789"
  mode="Canvas"
  width="200px" 
  height="100px">
</ejs-barcodegenerator>

Mode Comparison

Recommended: SVG for most use cases, especially for print.

---

Responsive Design

Mobile-First Layout

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

@Component({
  selector: 'app-responsive-layout',
  template: `
    <div class="barcode-container">
      <div class="barcode-card" *ngFor="let product of products">
        <h3>{{ product.name }}</h3>

        <ejs-barcodegenerator 
          type="Code128" 
          [value]="product.sku"
          [width]="barcodeSize"
          [height]="barcodeSize">
        </ejs-barcodegenerator>

        <p>SKU: {{ product.sku }}</p>
      </div>
    </div>
  `,
  styles: [`
    .barcode-container {
      display: grid;
      gap: 20px;
    }

    @media (max-width: 600px) {
      .barcode-container {
        grid-template-columns: 1fr;
      }
    }

    @media (min-width: 601px) and (max-width: 1200px) {
      .barcode-container {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 1201px) {
      .barcode-container {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    .barcode-card {
      padding: 20px;
      border: 1px solid #ddd;
      border-radius: 8px;
      text-align: center;
    }
  `]
})
export class ResponsiveLayoutComponent implements OnInit {
  barcodeSize = '150px';
  products = [
    { name: 'Product 1', sku: 'SKU-001' },
    { name: 'Product 2', sku: 'SKU-002' },
    { name: 'Product 3', sku: 'SKU-003' },
    { name: 'Product 4', sku: 'SKU-004' }
  ];

  ngOnInit() {
    this.updateBarcodeSize();
    window.addEventListener('resize', () => this.updateBarcodeSize());
  }

  updateBarcodeSize() {
    const width = window.innerWidth;
    if (width < 600) {
      this.barcodeSize = '100px';
    } else if (width < 1200) {
      this.barcodeSize = '120px';
    } else {
      this.barcodeSize = '150px';
    }
  }
}

Dark Mode Support

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

@Component({
  selector: 'app-dark-mode',
  template: `
    <div [class.dark-theme]="isDarkMode">
      <button (click)="toggleTheme()">
        {{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}
      </button>

      <ejs-barcodegenerator 
        type="QRCode" 
        value="https://example.com"
        [foreColor]="isDarkMode ? '#FFFFFF' : '#000000'"
        [backgroundColor]="isDarkMode ? '#1a1a1a' : '#FFFFFF'"
        width="200px" 
        height="200px">
      </ejs-barcodegenerator>
    </div>
  `,
  styles: [`
    .dark-theme {
      background-color: #1a1a1a;
      color: #FFFFFF;
    }
  `]
})
export class DarkModeComponent implements OnInit {
  isDarkMode = false;

  ngOnInit() {
    // Check system preference
    this.isDarkMode =
      window.matchMedia('(prefers-color-scheme: dark)').matches;
  }

  toggleTheme() {
    this.isDarkMode = !this.isDarkMode;
  }
}

---

Accessibility (WCAG Compliance)

Making barcodes accessible ensures all users can understand barcode purposes and content, including those using assistive technologies.

Color Contrast & WCAG Levels

Ensure sufficient contrast between foreColor and backgroundColor:

Color Contrast Examples

export class AccessibleBarcodeComponent {
  // ✅ WCAG AA Compliant (4.5:1 ratio)
  goodContrast = {
    foreColor: '#000000',        // Black
    backgroundColor: '#FFFFFF'   // White
    // Ratio: 21:1 (exceeds AA, meets AAA) ✅
  };

  // ✅ WCAG AA Compliant
  brandedCompliant = {
    foreColor: '#1A5490',        // Dark blue
    backgroundColor: '#FFFFFF'   // White
    // Ratio: 8.2:1 (exceeds AA, meets AAA) ✅
  };

  // ⚠️ WCAG AA Marginal (4.5:1)
  marginalContrast = {
    foreColor: '#666666',        // Medium gray
    backgroundColor: '#FFFFFF'   // White
    // Ratio: 4.5:1 (meets AA minimum, not AAA)
  };

  // ❌ NOT Compliant under 3:1
  poorContrast = {
    foreColor: '#CCCCCC',        // Light gray
    backgroundColor: '#FFFFFF'   // White
    // Ratio: 1.7:1 (fails WCAG) ❌
  };
}

Semantic HTML & ARIA Labels

Provide context for users with screen readers:

<!-- With semantic HTML and ARIA -->
<div class="barcode-section">
  <h2>Product Identification</h2>

  <ejs-barcodegenerator 
    type="Code128" 
    value="ABC123456789"
    role="img"
    aria-label="Product barcode: ABC123456789"
    aria-describedby="barcode-description"
    width="200px" 
    height="100px">
  </ejs-barcodegenerator>

  <!-- Screen reader only description -->
  <p id="barcode-description" class="sr-only">
    This barcode represents product SKU ABC123456789. 
    Users can scan this barcode with a standard barcode reader 
    to retrieve product information from inventory system.
  </p>

  <!-- Visual-only context -->
  <p class="barcode-label">SKU: ABC123456789</p>
</div>

<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
</style>

Accessible Barcode Component

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-accessible-barcode',
  template: `
    <div class="barcode-container" [attr.aria-label]="ariaLabel">
      <ejs-barcodegenerator 
        [type]="type"
        [value]="value"
        [foreColor]="foreColor"
        [backgroundColor]="backgroundColor"
        [width]="width"
        [height]="height"
        [displayText]="displayText"
        role="img"
        [attr.aria-describedby]="descriptionId">
      </ejs-barcodegenerator>

      <!-- Hidden description for assistive tech -->
      <p [id]="descriptionId" class="sr-only">
        {{ accessibilityDescription }}
      </p>

      <!-- Optional visual label -->
      <p *ngIf="visualLabel" class="barcode-label">
        {{ visualLabel }}
      </p>
    </div>
  `,
  styles: [`
    .barcode-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px;
    }

    .barcode-label {
      margin-top: 10px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
    }
  `]
})
export class AccessibleBarcodeComponent implements OnInit {
  @Input() type: string = 'Code128';
  @Input() value: string = '123456789';
  @Input() foreColor: string = '#000000';
  @Input() backgroundColor: string = '#FFFFFF';
  @Input() width: string = '200px';
  @Input() height: string = '100px';

  // EJ2: displayText is an object (not a string)
  @Input() displayText: { text?: string; visibility?: boolean } = { visibility: false };

  @Input() visualLabel?: string;
  @Input() ariaLabel?: string;
  @Input() accessibilityDescription?: string;

  descriptionId = `barcode-desc-${Math.random().toString(36).substr(2, 9)}`;

  ngOnInit() {
    // Default values if not provided (Inputs are reliably available by ngOnInit)
    if (!this.ariaLabel) {
      this.ariaLabel = `Barcode: ${this.value}`;
    }
    if (!this.accessibilityDescription) {
      this.accessibilityDescription =
        `This barcode encodes: ${this.value}. Scan with a barcode reader to process.`;
    }
  }
}

High Contrast Mode Support

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

export class HighContrastBarcodeComponent implements OnInit {
  isDarkMode = false;
  isPrintMode = false;

  template = `
    <div [class.print-mode]="isPrintMode" 
         [class.dark-mode]="isDarkMode">
      <ejs-barcodegenerator 
        type="Code128"
        value="PRINT-001"
        [foreColor]="getForeColor()"
        [backgroundColor]="getBackColor()"
        width="200px"
        height="100px">
      </ejs-barcodegenerator>
    </div>
  `;

  getForeColor(): string {
    if (this.isPrintMode) return '#000000'; // Always black for print
    if (this.isDarkMode) return '#FFFFFF';  // White for dark mode
    return '#000000'; // Black for light mode
  }

  getBackColor(): string {
    if (this.isPrintMode) return '#FFFFFF'; // Always white for print
    if (this.isDarkMode) return '#1A1A1A';  // Dark for dark mode
    return '#FFFFFF'; // White for light mode
  }

  ngOnInit() {
    // Detect dark mode preference
    this.isDarkMode =
      window.matchMedia('(prefers-color-scheme: dark)').matches;

    // Detect print mode
    window.addEventListener('beforeprint', () => {
      this.isPrintMode = true;
    });
    window.addEventListener('afterprint', () => {
      this.isPrintMode = false;
    });
  }
}

---

Next Steps

• For linear barcodes, see linear-barcodes.md
• For QR codes, see qr-codes.md
• For Data Matrix, see data-matrix-barcodes.md
• To export barcodes, see exporting-barcodes.md

Data Matrix Barcodes

Table of Contents

• Data Matrix Overview
• When to Use Data Matrix
• Basic Implementation
• Dimensions & Sizing
• Customizing Appearance
• Display Text
• Data Encoding
• Industry Applications
• Data Matrix vs QR Code

---

Data Matrix Overview

Data Matrix is a two-dimensional barcode symbology consisting of black and white modules (squares) arranged in a simple grid pattern. It encodes data in a compact square or rectangular format, making it ideal for space-constrained applications.

Key Characteristics

• 2D Symbology: Grid of dark and light squares (typically square, but rectangular variants exist)
• High Data Density: Encodes large amounts of data in small physical space
• Error Correction: Reed–Solomon error correction for reliability
• Variable Sizes: From 10×10 to 144×144 modules
• Alphanumeric Support: Numeric, ASCII, and extended ASCII characters

Data Matrix Advantages

✅ Compact size (excellent for small labels) ✅ High data capacity (similar to QR codes) ✅ Industrial standard (aerospace, pharmaceutical, logistics) ✅ Printable at small sizes (still scannable) ✅ Works on low-resolution printers

---

When to Use Data Matrix

Ideal Scenarios

Healthcare & Pharmaceutical:

• Medicine packaging and tracking
• Prescription labels
• Medical device identification
• Hospital supply chain tracking

Manufacturing & Logistics:

• Component tracking in assembly
• Shipping labels
• Return merchandise authorization (RMA)
• Asset tracking

Aerospace & Defense:

• Parts traceability
• Component identification
• Compliance documentation

Small Item Labeling:

• Jewelry and watches
• Electronics components
• Part numbers
• Serial numbers

Data Matrix vs Other Barcodes

---

Basic Implementation

Simplest Data Matrix

<ejs-barcodegenerator 
  type="DataMatrix" 
  value="TRACKING-001" 
  width="120px" 
  height="120px">
</ejs-barcodegenerator>

TypeScript Component

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

@Component({
  selector: 'app-datamatrix',
  template: `
    <ejs-barcodegenerator 
      type="DataMatrix" 
      [value]="trackingCode" 
      width="150px" 
      height="150px">
    </ejs-barcodegenerator>
  `
})
export class DataMatrixComponent {
  trackingCode = 'TRK-2026-3847-92';
}

Medical Device Tracking

export class MedicalDeviceComponent {
  // Device serial + lot number + expiration
  deviceTrackingCode = 'DEV-SN-123456-LOT-789-EXP-2028-06';

  generateTrackingLabel() {
    return this.deviceTrackingCode;
  }
}

---

Dimensions & Sizing

Data Matrix supports multiple size options. Smaller sizes are possible because of high data density.

Size Guidelines

Implementation

<!-- Small Data Matrix for tiny labels -->
<ejs-barcodegenerator 
  type="DataMatrix" 
  value="SN123456"
  width="50px" 
  height="50px">
</ejs-barcodegenerator>

<!-- Standard Data Matrix for product labels -->
<ejs-barcodegenerator 
  type="DataMatrix" 

Capacity by Module Size

---

Customizing Appearance

Data Matrix supports color customization similar to other barcode types.

Color Customization

<!-- Standard black on white -->
<ejs-barcodegenerator 
  type="DataMatrix" 
  value="DATA-999"
  foreColor="#000000"
  backgroundColor="#FFFFFF"
  width="120px" 
  height="120px">
</ejs-barcodegenerator>

<!-- Professional color scheme -->
<ejs-barcodegenerator 
  type="DataMatrix" 
  value="DATA-999"
  foreColor="#1976D2"
  backgroundColor="#F5F5F5"
  width="120px" 
  height="120px">
</ejs-barcodegenerator>

<!-- Dark mode -->
<ejs-barcodegenerator 
  type="DataMatrix" 
  value="DATA-999"
  foreColor="#FFFFFF"
  backgroundColor="#1a1a1a"
  width="120px" 
  height="120px">
</ejs-barcodegenerator>

Component with Theme Selection

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

@Component({
  selector: 'app-themed-datamatrix',
  template: `
    <div>
      <select (change)="setTheme($event)">
        <option value="standard">Standard (Black/White)</option>
        <option value="brand">Brand Colors</option>
        <option value="dark">Dark Mode</option>
      </select>

      <ejs-barcodegenerator 
        type="DataMatrix" 
        value="DATA-MATRIX-2026"
        [foreColor]="foreColor"
        [backgroundColor]="backgroundColor"
        width="150px" 
        height="150px">
      </ejs-barcodegenerator>
    </div>
  `
})
export class ThemedDataMatrixComponent {
  foreColor = '#000000';
  backgroundColor = '#FFFFFF';

  setTheme(event: Event) {
    const theme = (event.target as HTMLSelectElement).value;

    if (theme === 'brand') {
      this.foreColor = '#1976D2';
      this.backgroundColor = '#E3F2FD';
    } else if (theme === 'dark') {
      this.foreColor = '#FFFFFF';
      this.backgroundColor = '#1a1a1a';
    } else {
      this.foreColor = '#000000';
      this.backgroundColor = '#FFFFFF';
    }
  }
}

⚠️ Color Contrast Important

Data Matrix requires good contrast for reliable scanning:

• ✅ Good: High contrast between foreground and background
• ❌ Bad: Similar brightness levels (won't scan)

---

Display Text

Display text appears below the Data Matrix barcode for human-readable identification.

Basic Display Text

<ejs-barcodegenerator 
  type="DataMatrix" 
  value="TRK-123456-789"
  [displayText]="{ text: 'Batch #789', visibility: true }"
  width="120px" 
  height="120px">
</ejs-barcodegenerator>

Display Text Examples

// Pharmaceutical batch number
displayText = { text: 'BATCH: 789-2026-Q1', visibility: true };

// Medical device lot
displayText = { text: 'LOT: ABC123 EXP: 2028-06', visibility: true };

// Product serial
displayText = { text: 'SN: 456789', visibility: true };

// Shipment reference
displayText = { text: 'SHIP: 2026-03-21-001', visibility: true };

// Asset ID
displayText = { text: 'ASSET: A-789456', visibility: true };

Dynamic Display Text

export class LabeledDataMatrixComponent {
  trackingValue = 'TRK-2026-001';

  displayText = {
    text: 'Batch: BATCH-789',
    visibility: true
  };

  updateBatch(newBatch: string) {
    this.displayText = {
      text: `Batch: ${newBatch}`,
      visibility: true
    };
  }
}

<ejs-barcodegenerator
  type="DataMatrix" 
  [value]="trackingValue"
  [displayText]="displayText"
  width="120px" 
  height="120px">
</ejs-barcodegenerator>

---

Data Encoding

Data Matrix supports multiple character sets with automatic encoding optimization:

Supported Character Sets

Encoding Examples

// Numeric – most efficient
numericData = '123456789';

// Alphanumeric
alphaData = 'PRODUCT-CODE-123';

// Full ASCII
asciiData = 'product-123-abc@example.com';

// Component auto-selects most efficient encoding

Data Capacity

---

Industry Applications

Healthcare & Pharmaceutical

export class PharmaTrackingComponent {
  // Medicine packaging
  medicineTracking = `MED-2026-BATCH-789
                       LOT:789-ABC
                       EXP:2028-06-15
                       SN:PHM-456789`;
  
  // Medical device
  deviceTracking = 'DEVX-SN-123456-LOT-789-REV-A1';
}

Manufacturing & Logistics

export class ManufacturingComponent {
  // Component part number
  partTracking = 'PN-A123B456-LOT-001-2026';
  
  // Assembly station
  assemblyStation = 'STATION-02-2026-03-21-00456';
  
  // Quality inspection
  qcPass = 'QC-PASS-LINE-03-2026-03-21';
}

Aerospace & Defense

export class AerospaceComponent {
  // Aircraft component
  componentTracking = 'AC-ENG-001-SN-789456-REV-B2';
  
  // Traceability data
  traceability = 'PART-789456-LOT-003-DATE-2026-03-21';
}

---

Data Matrix vs QR Code

Feature Comparison

Choose Data Matrix If

✅ Small physical space required (jewelry, components) ✅ Industrial/manufacturing application ✅ Healthcare/pharmaceutical use ✅ Supply chain/logistics tracking ✅ Printable at tiny sizes (5mm×5mm possible)

Choose QR Code If

✅ Mobile phone scanning required ✅ Marketing/promotional content ✅ Consumer-facing application ✅ URL or contact information ✅ General public scanning expected

Size Comparison

Data Matrix: 5×5mm = 16 data modules (very compact)
QR Code: 10×10mm = 21×21 modules minimum (larger)

For same data, Data Matrix occupies ~4× less space

---

Next Steps

• For QR codes, see qr-codes.md
• For linear barcodes, see linear-barcodes.md
• To customize appearance, see customization.md
• To export barcodes, see exporting-barcodes.md

Exporting Barcodes

Table of Contents

• Export Overview
• Exporting as Image File
• Exporting as Base64 String
• Download Functionality
• File Naming Conventions
• Export Use Cases
• Backend Integration

---

Export Overview

The Syncfusion Barcode Generator provides multiple export options for different use cases:

---

Exporting as Image File

Basic Export Method

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

@Component({
  selector: 'app-export',
  template: `
    <div>
      <button (click)="downloadBarcode()">Download as PNG</button>

      <ejs-barcodegenerator
        #barcode
        type="Code128"
        value="EXPORT-123456"
        width="200px"
        height="150px">
      </ejs-barcodegenerator>
    </div>
  `
})
export class ExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  downloadBarcode() {
    // exportImage(fileName, exportType)
    this.barcode.exportImage('barcode', 'PNG');
  }
}

Export Parameters

// barcode.exportImage(fileName, exportType)

// PNG format
this.barcode.exportImage('my-barcode', 'PNG');
// Creates: my-barcode.png

// SVG format (scalable)
this.barcode.exportImage('my-barcode', 'SVG');
// Creates: my-barcode.svg

// JPG format (compressed)
this.barcode.exportImage('my-barcode', 'JPG');
// Creates: my-barcode.jpg

Supported Formats

Full Export Example

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

@Component({
  selector: 'app-multi-export',
  template: `
    <div class="export-controls">
      <h3>Export Barcode</h3>

      <div class="button-group">
        <button (click)="exportAs('PNG')">Export as PNG</button>
        <button (click)="exportAs('JPG')">Export as JPG</button>
      </div>

      <ejs-barcodegenerator
        #barcode
        type="Code128"
        value="MULTI-EXPORT-001"
        width="250px"
        height="150px">
      </ejs-barcodegenerator>

      <p>Status: {{ exportStatus }}</p>
    </div>
  `,
  styles: [`
    .export-controls { padding: 20px; }
    .button-group { margin: 20px 0; }
    button {
      padding: 10px 20px;
      margin: 5px;
      cursor: pointer;
    }
  `]
})
export class MultiExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  exportStatus = 'Ready';

  exportAs(format: 'PNG' | 'JPG') {
    try {
      this.exportStatus = `Exporting as ${format}...`;
      this.barcode.exportImage(`barcode-${Date.now()}`, format);
      this.exportStatus = `Successfully exported as ${format}`;
    } catch (error) {
      this.exportStatus = 'Export failed';
      console.error(error);
    }
  }
}

---

Exporting as Base64 String

Base64 export allows you to store barcode data without creating files.

Basic Base64 Export

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

@Component({
  selector: 'app-base64',
  template: `
    <div>
      <button (click)="getBase64()">Get Base64 String</button>

      <ejs-barcodegenerator 
        #barcode
        type="QRCode" 
        value="https://example.com"
        width="200px" 
        height="200px">
      </ejs-barcodegenerator>

      <div *ngIf="base64String" class="result">
        <p>Base64 String:</p>
        <textarea readonly>{{ base64String }}</textarea>
      </div>
    </div>
  `
})
export class Base64Component {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  base64String = '';

  getBase64() {
    // Returns a Base64 Data URL string
    this.base64String = this.barcode.exportAsBase64Image('PNG');
    console.log('Base64 Data URL:', this.base64String);
  }
}

Base64 Format

// Returns Data URL format
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA....'
         │      │   │
         │      │   └─ Base64 encoded image data
         │      └──── Image MIME type
         └────────── Data URL scheme

Supported Formats (Base64)

// PNG
this.barcode.exportAsBase64Image('PNG');
// Returns: data:image/png;base64,...

// JPEG
this.barcode.exportAsBase64Image('JPG');
// Returns: data:image/jpeg;base64,...

Store Base64 in Database

export class StoreBarcodeService {
  constructor(private http: HttpClient) {}

  saveBarcode(barcodeData: string, productId: string) {
    return this.http.post('/api/barcodes', {
      productId: productId,
      barcodeImage: barcodeData,  // Base64 string
      timestamp: new Date()
    });
  }

  retrieveBarcode(productId: string) {
    return this.http.get(`/api/barcodes/${productId}`);
  }
}

---

Download Functionality

Manual Download with Custom Filename

downloadBarcodeWithName(filename: string) {
  const element = document.createElement('a');
  const file = new Blob([/* barcode data */], { type: 'image/png' });
  element.href = URL.createObjectURL(file);
  element.download = filename;
  document.body.appendChild(element);
  element.click();
  document.body.removeChild(element);
}

Export with Timestamp

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class TimestampedExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  exportWithTimestamp() {
    const timestamp = new Date().toISOString()
      .slice(0, 10)
      .replace(/-/g, ''); // YYYYMMDD

    const filename = `barcode-${timestamp}`;

    // ✅ EJ2 BarcodeGenerator export API
    this.barcode.exportImage(filename, 'PNG');
  }
}

Batch Download Multiple Barcodes

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class BatchExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  barcodes = [
    { id: 'PROD-001', value: 'SKU-001' },
    { id: 'PROD-002', value: 'SKU-002' },
    { id: 'PROD-003', value: 'SKU-003' }
  ];

  async exportAllBarcodes() {
    for (const item of this.barcodes) {
      // Update barcode value
      this.barcode.value = item.value;

      // Ensure the component refreshes with the new value before exporting
      this.barcode.dataBind();

      // Small delay to allow DOM render (optional but safe in batch exports)
      await this.sleep(100);

      // Export (fileName, format)
      this.barcode.exportImage(item.id, 'PNG');
    }

    alert('All barcodes exported');
  }

  sleep(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

---

File Naming Conventions

Standard Conventions

// Date-based
`barcode-${new Date().toISOString().slice(0, 10)}`  // barcode-2026-03-21

// Product-based
`SKU-${productCode}-barcode`  // SKU-123456-barcode

// Batch-based
`BATCH-${batchNumber}-exported`  // BATCH-789-exported

// ID-based
`barcode-${uuid()}`  // barcode-550e8400-e29b-41d4-a716-446655440000

Component with Naming Strategy

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class SmartNameComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  productCode = 'SKU-123456';
  batchNumber = '789';

  exportBarcode(namingStrategy: 'date' | 'product' | 'batch') {
    let filename = '';

    switch (namingStrategy) {
      case 'date':
        filename = `barcode-${this.getDateString()}`;
        break;
      case 'product':
        filename = `${this.productCode}-barcode`;
        break;
      case 'batch':
        filename = `BATCH-${this.batchNumber}`;
        break;
    }

    // ✅ EJ2 export API: exportImage(fileName, format)
    this.barcode.exportImage(filename, 'PNG');
  }

  getDateString(): string {
    return new Date().toISOString().slice(0, 10);
  }
}

---

Export Use Cases

Use Case 1: E-commerce Product Export

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class ECommerceExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  product = {
    id: '123456',
    name: 'Widget Pro',
    sku: 'WGT-PRO-001'
  };

  generateProductBarcode() {
    this.barcode.value = this.product.sku;
    this.barcode.dataBind();

    const filename = `product-${this.product.id}-barcode`;
    this.barcode.exportImage(filename, 'PNG');
  }
}

Use Case 2: Inventory Label Printing

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class InventoryLabelComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  printInventoryLabel(itemId: string) {
    const filename = `INV-${itemId}-${Date.now()}`;
    this.barcode.exportImage(filename, 'PNG');
    // Then print using window.print() or printer API
  }
}
``

Use Case 3: QR Code Sharing

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class ShareQRComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  async shareQRCode() {
    // ✅ EJ2 Base64 export
    const base64 = this.barcode.exportAsBase64Image('PNG');

    // Share via Web Share API (if available)
    if (navigator.share) {
      await navigator.share({
        title: 'Event QR Code',
        text: 'Scan this to register for our event',
        files: [
          new File(
            [this.base64ToBlob(base64)],
            'event-qr.png',
            { type: 'image/png' }
          )
        ]
      });
    }
  }

  base64ToBlob(base64: string): Blob {
    const [header, data] = base64.split(',');
    const bstr = atob(data);
    const n = bstr.length;
    const u8arr = new Uint8Array(n);
    for (let i = 0; i < n; i++) {
      u8arr[i] = bstr.charCodeAt(i);
    }
    return new Blob([u8arr], { type: 'image/png' });
  }
}

Use Case 4: Database Storage

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class DatabaseStorageComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  constructor(private barcodeService: BarcodeService) {}

  saveBarcodeToDatabase(productId: string) {
    // ✅ EJ2 Base64 export
    const base64Image = this.barcode.exportAsBase64Image('PNG');

    this.barcodeService.saveBarcodeImage({
      productId: productId,
      imageData: base64Image,
      createdAt: new Date()
    }).subscribe(
      response => console.log('Saved successfully'),
      error => console.error('Save failed', error)
    );
  }
}

---

Advanced Export Patterns

Pattern 1: Batch Export Multiple Barcodes

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class BatchExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  products = [
    { sku: 'PROD-001', name: 'Widget' },
    { sku: 'PROD-002', name: 'Gadget' },
    { sku: 'PROD-003', name: 'Doohickey' }
  ];

  // Export all product barcodes as a ZIP would, or save to database
  async exportAllBarcodes() {
    const exportedBarcodes: Array<{
      sku: string;
      name: string;
      imageData: string;
      timestamp: Date;
    }> = [];

    for (const product of this.products) {
      // Update barcode value
      this.barcode.value = product.sku;
      this.barcode.dataBind();

      // Wait for render (optional but safe for batch operations)
      await this.sleep(200);

      // Get base64 (Data URL)
      const base64 = this.barcode.exportAsBase64Image('PNG');

      exportedBarcodes.push({
        sku: product.sku,
        name: product.name,
        imageData: base64,
        timestamp: new Date()
      });
    }

    // Save all to backend or storage
    return exportedBarcodes;
  }

  private sleep(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

Pattern 2: Email Integration with Embedded Barcode

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class EmailBarcodeComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  constructor(private emailService: EmailService) {}

  sendBarcodeEmail(toEmail: string, productInfo: any) {
    // Get barcode as base64 (Data URL)
    const barcodeImage = this.barcode.exportAsBase64Image('PNG');

    // Prepare email payload
    const emailPayload = {
      to: toEmail,
      subject: `Barcode for ${productInfo.name}`,
      htmlBody: `
        <h2>Product Barcode</h2>
        <p>Product: ${productInfo.name}</p>
        <p>SKU: ${productInfo.sku}</p>
        <img src="${barcodeImage}" alt="Product barcode" />
        <p>Scan this barcode to view product details.</p>
      `,
      attachments: [{
        filename: `barcode-${productInfo.sku}.png`,
        data: barcodeImage.split(',')[1], // Remove data:image/png;base64, prefix
        encoding: 'base64'
      }]
    };

    // Send to backend email service
    this.emailService.sendBarcodeEmail(emailPayload).subscribe(
      response => console.log('Email sent'),
      error => console.error('Email failed', error)
    );
  }
}

Pattern 3: Print-Optimized Export

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class PrintOptimizedExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  printBarcode(quantity: number = 1) {
    // Create print window
    const printWindow = window.open('', '', 'height=600,width=800');
    if (!printWindow) return;

    let printContent = `
      <!DOCTYPE html>
      <html>
      <head>
        <title>Barcode Print</title>
        <style>
          @media print {
            body { margin: 0; padding: 10mm; }
            .barcode-label {
              display: inline-block;
              margin: 5mm;
              padding: 10mm;
              border: 1px solid #ccc;
              page-break-inside: avoid;
            }
            img { max-width: 100%; height: auto; }
          }
        </style>
      </head>
      <body>
    `;

    // Generate a printable Data URL image
    const barcodeImage = this.barcode.exportAsBase64Image('PNG');

    for (let i = 0; i < quantity; i++) {
      printContent += `
        <div class="barcode-label">
          <p>Copy ${i + 1}</p>
          <img src="${barcodeImage}" alt="Barcode copy ${i + 1}" />
        </div>
      `;
    }

    printContent += `
      </body>
      </html>
    `;

    printWindow.document.write(printContent);
    printWindow.document.close();

    // Trigger print after content loads
    printWindow.onload = () => {
      printWindow.print();
    };
  }
}

Pattern 4: PDF Export with Multiple Barcodes

import { ViewChild } from '@angular/core';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class PDFExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  // Note: Requires jsPDF and html2canvas libraries
  // npm install jspdf html2canvas

  async exportToPDF(products: any[]) {
    const jsPDF = (window as any).jsPDF;
    const html2canvas = (window as any).html2canvas;

    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'mm',
      format: 'a4'
    });

    let yPosition = 20;
    const pageWidth = pdf.internal.pageSize.getWidth();

    for (const product of products) {
      // Update and render barcode
      this.barcode.value = product.sku;
      this.barcode.dataBind();
      await this.sleep(200);

      // Prefer the rendered SVG (default render mode is SVG)
      const barcodeElement = document.querySelector('ejs-barcodegenerator svg');
      const canvas = await html2canvas(barcodeElement as HTMLElement);
      const imgData = canvas.toDataURL('image/png');

      // Add to PDF
      pdf.addImage(imgData, 'PNG', 20, yPosition, 80, 60);
      pdf.text(`SKU: ${product.sku}`, pageWidth - 40, yPosition + 10);
      pdf.text(`${product.name}`, 20, yPosition + 65);

      yPosition += 80;

      // New page if needed
      if (yPosition > 250) {
        pdf.addPage();
        yPosition = 20;
      }
    }

    pdf.save('barcodes.pdf');
  }

  private sleep(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

Pattern 5: API Upload with Metadata

import { ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BarcodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class APIUploadExportComponent {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  constructor(private http: HttpClient) {}

  async uploadBarcodeWithMetadata(productId: string, metadata: any) {
    // Get barcode image as Data URL
    const barcodeImage = this.barcode.exportAsBase64Image('PNG');

    // Prepare FormData for multipart upload
    const formData = new FormData();

    // Add image as blob
    const blob = this.dataURLToBlob(barcodeImage);
    formData.append('barcode_image', blob, `barcode-${productId}.png`);

    // Add metadata
    formData.append('product_id', productId);
    formData.append('barcode_value', this.barcode.value);
    formData.append('generated_at', new Date().toISOString());
    formData.append('metadata', JSON.stringify(metadata));

    // Upload to API
    return this.http.post('/api/barcodes/upload', formData).toPromise();
  }

  private dataURLToBlob(dataURL: string): Blob {
    const parts = dataURL.split(';base64,');
    const bstr = atob(parts[1]);
    const n = bstr.length;
    const u8arr = new Uint8Array(n);
    for (let i = 0; i < n; i++) {
      u8arr[i] = bstr.charCodeAt(i);
    }
    return new Blob([u8arr], { type: 'image/png' });
  }

  constructor(private http: HttpClient) {}
}

---

Backend Integration

Store & Retrieve Barcodes

import { HttpClient } from '@angular/common/http';

// Angular Service
export class BarcodeService {
  constructor(private http: HttpClient) {}

  saveBarcodeImage(data: {
    productId: string;
    imageData: string;
    createdAt: Date;
  }) {
    return this.http.post('/api/barcodes', data);
  }

  getBarcodeImage(productId: string) {
    return this.http.get(`/api/barcodes/${productId}`);
  }

  exportMultiple(productIds: string[]) {
    return this.http.post('/api/barcodes/batch-export', {
      productIds: productIds
    });
  }
}

Embed in Email

// Generate QR code as base64, embed in HTML email
const emailBody = `
  <h1>Order Confirmation</h1>
  <p>Track your order:</p>
  <img src="${base64QRCode}" alt="Tracking QR Code" />
`;

// Send via backend email service
this.emailService.sendEmail({
  to: 'customer@example.com',
  subject: 'Your Order',
  htmlBody: emailBody
});

---

Next Steps

• For linear barcodes, see linear-barcodes.md
• For QR codes, see qr-codes.md
• For Data Matrix, see data-matrix-barcodes.md
• To customize appearance, see customization.md

Getting Started with Barcode Generation

Table of Contents

• Installation
• Package Selection
• Component Setup
• Basic Code128 Barcode
• QR Code Setup
• Data Matrix Setup
• Common Setup Issues

---

Installation

Step 1: Install Syncfusion Barcode Package

The Syncfusion barcode component requires the @syncfusion/ej2-angular-barcode-generator package. Install via npm:

npm install @syncfusion/ej2-angular-barcode-generator --save

This installs the latest Ivy-compatible version (recommended for Angular 12+).

Step 2: Verify Installation

Check that the package appears in package.json:

{
  "dependencies": {
    "@syncfusion/ej2-angular-barcode-generator": "^20.2.48"
  }
}

---

Package Selection

Ivy Library Distribution (Recommended)

Use for: Angular 12+

npm install @syncfusion/ej2-angular-barcode-generator --save

Advantages:

• Smaller bundle size
• Better tree-shaking
• Modern Angular support
• Default installation

In package.json:

"@syncfusion/ej2-angular-barcode-generator": "^20.2.48"

Angular Compatibility Compiler (ngcc) Legacy

Use for: Angular <12

npm install @syncfusion/ej2-angular-barcode-generator@ngcc --save

When to use:

• Angular 11 or earlier
• Legacy projects
• Compatibility issues with Ivy

In package.json:

"@syncfusion/ej2-angular-barcode-generator": "20.2.48-ngcc"

Note: If ngcc suffix isn't specified, Ivy package installs by default and may show warnings in older Angular versions.

---

Component Setup

Step 1: Import in AppModule

Add BarcodeGeneratorModule to your module imports:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BarcodeGeneratorModule } from '@syncfusion/ej2-angular-barcode-generator';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BarcodeGeneratorModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 2: Import CSS Theme

Add Syncfusion theme to styles.css or styles.scss:

/* styles.css - Add at the top */
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-barcode-generator/styles/material.css';

Available themes: material, material-dark, fabric, fabric-dark, bootstrap, bootstrap-dark, bootstrap5, bootstrap5-dark, tailwind, tailwind-dark

Step 3: Verify Setup in Component

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Barcode Generation Example';
}

---

Basic Code128 Barcode

Code128 is the most widely-used linear barcode for retail and inventory systems. It supports the full ASCII set and includes automatic checksums.

Template (HTML)

<!-- app.component.html -->
<div class="barcode-container">
  <h1>Product Barcode</h1>

  <ejs-barcodegenerator
    type="Code128"
    value="123456789ABC"
    width="200px"
    height="150px"
    [displayText]="{ text: 'SKU: 123456789ABC', visibility: true }">
  </ejs-barcodegenerator>
</div>

Component (TypeScript)

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  barcodeValue = '123456789ABC';
}

Styling (CSS)

/* app.component.css */
.barcode-container {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-width: 400px;
}

h1 {
  font-size: 18px;
  margin-bottom: 20px;
}

ejs-barcodegenerator {
  display: block;
  margin: 20px 0;
}

---

QR Code Setup

QR codes are perfect for encoding URLs, contact information, or embedding in marketing materials.

Basic QR Code

<ejs-barcodegenerator
  type="QRCode"
  value="https://example.com"
  width="200px"
  height="200px">
</ejs-barcodegenerator>

Dynamic QR Code with Input

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  qrValue = 'https://example.com';

  onInputChange(event: any) {
    this.qrValue = event.target.value;
  }
}

<!-- app.component.html -->
<div>
  <input 
    type="text" 
    placeholder="Enter URL or text"
    (change)="onInputChange($event)"
    value="https://example.com">
  
  <ejs-barcodegenerator 
    [value]="qrValue" 
    type="QRCode" 
    width="250px" 
    height="250px">
  </ejs-barcodegenerator>
</div>

---

Data Matrix Setup

Data Matrix codes are ideal for compact, high-density encoding on small labels.

Basic Data Matrix

<ejs-barcodegenerator
  type="DataMatrix"
  value="PHARMACEUTICAL-TRACKING-001"
  width="100px"
  height="100px">
</ejs-barcodegenerator>

With Display Text

<ejs-barcodegenerator
  type="DataMatrix"
  value="TRACK-20260321-BATCH-789"
  [displayText]="{ text: 'Batch #789', visibility: true }"
  width="120px"
  height="120px">
</ejs-barcodegenerator>

---

Common Setup Issues

Issue 1: Component Not Recognized

Error: 'ejs-barcodegenerator' is not a known element

Solution:

• Verify BarcodeGeneratorModule is imported in app.module.ts
• Restart the development server (ng serve)
• Clear node_modules: rm -rf node_modules && npm install

Issue 2: Missing Styles

Error: Barcode displays but styles look broken or unstyled

Solution:

/* Ensure theme CSS is imported at the TOP of styles.css */
@import '@syncfusion/ej2-base/styles/material.css';
@import '@syncfusion/ej2-barcode-generator/styles/material.css';

Issue 3: Package Version Mismatch

Error: Module not found: '@syncfusion/ej2-angular-barcode-generator'

Solution:

npm list @syncfusion/ej2-angular-barcode-generator
npm update @syncfusion/ej2-angular-barcode-generator

Issue 4: SVG Mode Problems

Error: Barcode not rendering or appears blank

Solution: Explicitly set mode to SVG:

<ejs-barcodegenerator 
  type="Code128" 
  value="123456789" 
  mode="SVG"
  width="200px" 
  height="150px">
</ejs-barcodegenerator>

Issue 5: ViewChild Reference Undefined

Error: Cannot read property 'export' of undefined

Solution: Wait for component to initialize using @ViewChild with static false:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('barcode', { static: false })
  barcode!: BarcodeGeneratorComponent;

  ngAfterViewInit() {
    // NOW barcode is initialized
    console.log(this.barcode);
  }
}

---

Next Steps

• For linear barcodes, see linear-barcodes.md
• For QR code details, see qr-codes.md
• For Data Matrix, see data-matrix-barcodes.md
• To customize appearance, see customization.md
• To export barcodes, see exporting-barcodes.md

Linear Barcodes (Code39, Code128, Codabar, etc.)

Table of Contents

• Overview
• Barcode Types Comparison
• Code39 (Basic Alphanumeric)
• Code39 Extended (Full ASCII)
• Code128 (High-Density Standard)
• Code128 Character Sets
• Code11 (Telecommunications)
• Codabar (Library & Medical)
• Code32 (Pharmaceutical)
• Code93 & Code93 Extended
• Choosing the Right Type
• Character Set Reference

---

Overview

Linear barcodes are one-dimensional symbologies used for retail, inventory, and industrial applications. Each type has specific strengths in terms of character set, error correction, and industry adoption.

Key characteristics:

• Single-row encoding (horizontal bars and spaces)
• Automatic checksums for data validation
• Industry-standard support across all barcode scanners
• Variable-length data (type-dependent)
• Different character set limitations per type

---

Barcode Types Comparison

---

Code39 (Basic Alphanumeric)

Code39 is a simple, widely-supported symbology supporting digits 0-9, uppercase A-Z, and select special characters.

Character Set

Supported: 0-9, A-Z, -, ., (space), $, /, +, %

Note: Code39 doesn't require a checksum digit (one of its strengths for legacy systems).

Basic Implementation

<ejs-barcodegenerator 
  type="Code39" 
  value="ABC123" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

Component Example

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

@Component({
  selector: 'app-barcode',
  template: `
    <div>
    <ejs-barcodegenerator
      type="Code39" 
      [value]="productCode" 
      width="200px" 
      height="120px"
      [displayText]="{ text: 'SKU: ' + productCode, visibility: true }">
    </ejs-barcodegenerator>
    </div>
  `
})
export class BarcodeComponent {
  productCode = 'PRODUCT-001';
}

When to Use Code39

✅ Use if:

• Supporting old barcode systems (no checksum needed)
• Need uppercase + numbers + basic punctuation
• Backwards compatibility with legacy equipment
• Simple product identifiers

❌ Avoid if:

• Need high data density (Code128 better)
• Require lowercase letters (use Code39 Extended)
• Need full ASCII support (use Code128)

---

Code39 Extended (Full ASCII)

Code39 Extended encodes the full ASCII character set (lowercase, digits, uppercase, special characters) through two-character combinations.

Character Set

Supported: Full ASCII (0-127) including lowercase letters, digits, uppercase, punctuation

Implementation

<ejs-barcodegenerator
  type="Code39Extension" 
  value="lowercase-123-special@chars" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

TypeScript Component

export class ExtendedBarcodeComponent {
  // Full ASCII support allows lowercase and special chars
  serialNumber = 'SN-2026-abc-123@temp.org';

  generateBarcode() {
    // Extended Code39 encodes the full string
    return this.serialNumber;
  }
}

When to Use Code39 Extended

✅ Use if:

• Need full ASCII character set
• Encoding email addresses or URLs
• Require lowercase letters
• Working with text data

❌ Avoid if:

• Data includes Tab/Control characters
• Binary data encoding needed
• Higher data density required

---

Code128 (High-Density Standard)

Code128 is the retail standard, supporting full ASCII with high data density and built-in checksum validation.

Advantages

• High density: Encodes 3-4 times more data than Code39 in same space
• Full ASCII: All 128 ASCII characters
• Automatic checksum: Built-in error detection
• Industry standard: Universally supported in retail

Character Sets (Optimizes Density)

Code128 uses 3 switchable character sets to maximize efficiency:

Code Set A (ASCII 0-95)

Uppercase letters, digits, punctuation, control characters

<!-- Code Set A encoding -->
<ejs-barcodegenerator 
  type="Code128" 
  value="UPPERCASE123+CONTROL" 
  width="180px" 
  height="100px">
</ejs-barcodegenerator>

Code Set B (ASCII 32-127)

Uppercase, lowercase, digits, punctuation

<!-- Code Set B encoding (default) -->
<ejs-barcodegenerator 
  type="Code128" 
  value="Mixed-Case-123-Data" 
  width="180px" 
  height="100px">
</ejs-barcodegenerator>

Code Set C (00-99 pairs)

Numeric pairs for ultra-high density numeric encoding

// Code Set C optimizes pure numeric data
// "12345678" encodes as 4 pairs instead of 8 characters
const numericCode = "12345678"; // 8 digits as 4 pairs

Basic Implementation

<ejs-barcodegenerator
  type="Code128" 
  value="SKU-123456-ABC-789" 
  width="200px" 
  height="150px"
  [displayText]="{ text: 'Product SKU', visibility: true }">
</ejs-barcodegenerator>

Component with Dynamic Values

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

@Component({
  selector: 'app-retail-barcode',
  template: `
    <div class="product">
      <input placeholder="Enter SKU" [(ngModel)]="sku">
      
      <ejs-barcodegenerator
        type="Code128" 
        [value]="sku" 
        width="220px" 
        height="140px"
        [displayText]="{ text: 'SKU: ' + sku, visibility: true }">
      </ejs-barcodegenerator>
    </div>
  `
})
export class RetailBarcodeComponent {
  sku = 'SKU-2026-001-ABC';
}

When to Use Code128

✅ Use if:

• Building retail/e-commerce systems (INDUSTRY STANDARD)
• Need high data density
• Encoding mixed alphanumeric data
• Data will be scanned by retail equipment

❌ Avoid if:

• Supporting very old legacy systems (Code39 better)
• Only encoding numeric data (GTIN-13 specialized barcode better)

---

Code11 (Telecommunications)

Code11 was designed for telecommunications equipment labeling. Limited to digits and hyphen only.

Character Set

Supported: 0-9, - (dash)

Implementation

<ejs-barcodegenerator 
  type="Code11" 
  value="0512874569" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

Telecom Equipment Example

export class TelecomBarcodeComponent {
  // Equipment serial with only digits and hyphens
  equipmentSerial = '05-128-74-569';
  
  generateLabel() {
    return this.equipmentSerial;
  }
}

When to Use Code11

✅ Use if:

• Labeling telecommunications equipment
• Inventory system for telecom/networking gear
• Only digits and hyphens in data

❌ Avoid if:

• General purpose use (Code128 better)
• Need to encode letters
• Retail/commerce systems

---

Codabar (Library & Medical)

Codabar is for specialized applications like libraries, blood banks, and package delivery with specific start/stop characters.

Character Set

Supported: 0-9, -, $, :, /, ., +, and special A-D start/stop

Implementation

<ejs-barcodegenerator 
  type="Codabar" 
  value="A123456789B" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

Medical Tracking Example

export class BloodBankBarcodeComponent {
  // Blood bank donation tracking
  donationID = 'A567890123B'; // A-D start/stop chars
  
  generateLabel() {
    return this.donationID;
  }
}

Start/Stop Characters

Codabar requires a start character (A, B, C, D) and matching stop character:

<!-- Valid: A-B or C-D pairing -->
<ejs-barcodegenerator type="Codabar" value="A123B">
<ejs-barcodegenerator type="Codabar" value="C456D">

<!-- Each side has specific character set -->
<!-- A/B start: data range, C/D start: different range -->

When to Use Codabar

✅ Use if:

• Library book tracking
• Blood bank/medical specimen tracking
• Package delivery services
• Industry specifically uses Codabar

❌ Avoid if:

• General retail (Code128 better)
• No special start/stop requirement

---

Code32 (Pharmaceutical)

Code32 is specifically for Italian pharmaceutical codes with a mandated 9-character structure (prefix + 8 digits + auto-checksum).

Required Format

• Position 1: 'A' prefix (not encoded in barcode)
• Positions 2-9: 8-digit Pharmacode
• Position 10: Auto-calculated checksum (displayed in barcode)

Implementation

<ejs-barcodegenerator 
  type="Code32" 
  value="12345678" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

Pharmaceutical Tracking

export class PharmaBarcodeComponent {
  generatePharmacodeBarcode(productCode: string) {
    // Input: "123456" (6 digits) -> Prefix with zeros
    // Becomes: "00123456" (8 digits)
    // Checksum automatically added
    const pharmacode = productCode.padStart(8, '0');
    
    return pharmacode; // System auto-adds checksum
  }

  ngOnInit() {
    const result = this.generatePharmacodeBarcode('123456');
    // Result barcode encodes: "00123456" + auto-checksum
  }
}

When to Use Code32

✅ Use if:

• Pharmaceutical/cosmetics labeling (Italian standard)
• Pharmacode encoding required
• Medical/healthcare product tracking
• Industry regulatory requirement

❌ Avoid if:

• Non-pharmaceutical use
• Not Italian standard requirement
• General product barcodes

---

Code93 & Code93 Extended

Code93 is an improved version of Code39 with higher data density and additional security.

Code93

Supports full ASCII through character combinations, similar to Code39 Extended but with more efficient encoding.

<ejs-barcodegenerator 
  type="Code93" 
  value="ABC123-TEST" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

Code93 Extended

Full 128 ASCII character support:

<ejs-barcodegenerator
  type="Code93Extension" 
  value="lowercase@symbols#123" 
  width="200px" 
  height="120px">
</ejs-barcodegenerator>

When to Use Code93

✅ Use if:

• Improving upon Code39 density
• Need all ASCII characters
• Enhanced security features desired

❌ Avoid if:

• Retail standard needed (Code128 better)
• Legacy Code39 support required

---

Choosing the Right Type

Decision Tree

Q: What's your primary use case?

1. Retail/E-commerce? → Code128

• Industry standard, high density, full ASCII

2. Legacy system compatibility? → Code39 or Code39Extended

• Older equipment often supports Code39

3. Telecommunications? → Code11

• Specialized for telecom equipment

4. Medical/Library? → Codabar

• Blood banks, libraries, tracking

5. Pharmaceutical/Cosmetics? → Code32

• Italian pharma standard

6. Improved Code39 needed? → Code93

• Better density than Code39

Data Type Guide

---

Industry-Specific Implementations

Retail: Product Labeling (Code128)

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

@Component({
  selector: 'app-product-label',
  template: `
    <div class="product-label" *ngFor="let product of products">
      <ejs-barcodegenerator
        type="Code128"
        [value]="product.sku"
        [displayText]="{ text: 'SKU: ' + product.sku, visibility: true }"
        width="150px"
        height="100px"
        foreColor="#000000"
        backgroundColor="#FFFFFF">
      </ejs-barcodegenerator>

      <p>{{ product.name }}</p>
      <p>\${{ product.price }}</p>
    </div>
  `,
  styles: [`
    .product-label {
      border: 1px solid #ccc;
      padding: 10px;
      width: 200px;
    }
  `]
})
export class ProductLabelComponent {
  products = [
    { sku: '5901234123457', name: 'Wireless Mouse', price: 24.99 },
    { sku: '5902876543210', name: 'USB Hub', price: 34.99 }
  ];
}

Pharmaceutical: Medication Packaging (Code32)

  // Code32 is mandatory for Italian pharma regulations
  // Format: A + 8 digits + auto checksum = 10 chars total
  
 import { Component } from '@angular/core';

@Component({
  selector: 'app-pharma-label',
  template: `
    <div class="pharma-label">
      <ejs-barcodegenerator
        type="Code32"
        [value]="medicationBatch.code"
        [displayText]="{ text: 'Batch: ' + medicationBatch.batch, visibility: true }"
        width="120px"
        height="80px"
        foreColor="#2C3E50">
      </ejs-barcodegenerator>

      <p><strong>{{ medicationBatch.name }}</strong></p>
      <p>{{ medicationBatch.batch }} | EXP: {{ medicationBatch.expiry }}</p>
    </div>
  `,
  styles: [`
    .pharma-label {
      border: 2px solid #27AE60;
      padding: 15px;
      width: 200px;
      font-size: 12px;
    }
  `]
})
export class PharmaLabelComponent {
  medicationBatch = {
    code: '00123456', // ✅ exactly 8 digits
    name: 'Acetaminophen 500mg',
    batch: 'BAT2026031',
    expiry: '2027-03-15'
  };
}

Healthcare: Medical Records (Codabar)

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

@Component({
  selector: 'app-medical-record',
  template: `
    <div class="medical-record">
      <h3>Patient Label</h3>

      <ejs-barcodegenerator
        type="Codabar"
        [value]="'A' + patientRecord.mrn + 'B'"
        [displayText]="{ text: 'MRN: ' + patientRecord.mrn, visibility: true }"
        width="150px"
        height="80px"
        foreColor="#C0392B">
      </ejs-barcodegenerator>

      <p><strong>{{ patientRecord.name }}</strong></p>
      <p>Blood Type: {{ patientRecord.bloodType }} | {{ patientRecord.facility }}</p>
    </div>
  `,
  styles: [`
    .medical-record {
      border: 3px solid #C0392B;
      padding: 15px;
      width: 220px;
    }
  `]
})
export class MedicalRecordComponent {
  patientRecord = {
    mrn: '123456789',
    name: 'Jane Doe',
    bloodType: 'O+',
    facility: 'Central Hospital'
  };
}

Telecommunications: Equipment Tracking (Code11)

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

@Component({
  selector: 'app-telecom-label',
  template: `
    <div class="telecom-label">
      <ejs-barcodegenerator
        type="Code11"
        [value]="equipment.serialNumber"
        [displayText]="{ text: 'SN: ' + equipment.serialNumber, visibility: true }"
        width="180px"
        height="90px"
        foreColor="#274E7F">
      </ejs-barcodegenerator>

      <p><strong>{{ equipment.type }}</strong></p>
      <p>{{ equipment.vendor }} | Installed: {{ equipment.installDate }}</p>
    </div>
  `,
  styles: [`
    .telecom-label {
      border: 2px dashed #274E7F;
      padding: 12px;
      width: 220px;
    }
  `]
})
export class TelecomLabelComponent {
  equipment = {
    serialNumber: '9876543210-5',
    type: 'Router Model X2000',
    vendor: 'NetworkTech Inc',
    installDate: '2025-06-01'
  };
}

Logistics: Shipment Tracking (Code39 Extended)

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

@Component({
  selector: 'app-shipping-label',
  template: `
    <div class="shipping-label">
      <ejs-barcodegenerator
        type="Code39Extension"
        [value]="shipment.trackingId"
        [displayText]="{ text: shipment.trackingId, visibility: true }"
        width="200px"
        height="100px"
        foreColor="#1A5490"
        [margin]="{ left: 10, right: 10, top: 10, bottom: 10 }">
      </ejs-barcodegenerator>

      <p><strong>{{ shipment.origin }} → {{ shipment.destination }}</strong></p>
      <p>Weight: {{ shipment.weight }} | Status: {{ shipment.status }}</p>
    </div>
  `,
  styles: [`
    .shipping-label {
      border: 1px solid #1A5490;
      padding: 15px;
      width: 240px;
    }
  `]
})
export class ShippingLabelComponent {
  shipment = {
    trackingId: 'TRACK-20260321-ABC123',
    origin: 'Warehouse NYC',
    destination: 'Distribution Center LA',
    weight: '15kg',
    status: 'In Transit'
  };
}

Library/Archives: Asset Management (Codabar)

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

@Component({
  selector: 'app-archive-asset',
  template: `
    <div class="archive-label">
      <ejs-barcodegenerator
        type="Codabar"
        [value]="'A' + sanitizedId + 'B'"
        [displayText]="{ text: 'ID: ' + asset.uuid, visibility: true }"
        width="160px"
        height="80px"
        foreColor="#6B4423">
      </ejs-barcodegenerator>

      <p><strong>{{ asset.title }}</strong></p>
      <p>{{ asset.section }} | {{ asset.condition }}</p>
    </div>
  `,
  styles: [`
    .archive-label {
      background: #FAF4ED;
      border: 2px solid #6B4423;
      padding: 12px;
      width: 220px;
    }
  `]
})
export class ArchiveAssetComponent {
  asset = {
    uuid: '4529-1234-5678-9876',
    title: 'Historical Documents Collection',
    section: 'Archive-001',
    condition: 'Preserved'
  };

  get sanitizedId(): string {
    return this.asset.uuid.replace(/[^0-9\\-\\$:\\/\\.\\+]/g, '');
  }
}

---

Character Set Reference

Code39 vs Code39 Extended

CODE39 SET: 0-9 A-Z - . $ / + % space
CODE39 EXTENDED: Full ASCII 0-127

Code128 Sets

SET A (ASCII 0-95):  Uppercase, digits, punctuation, control
SET B (ASCII 32-127): uppercase, lowercase, digits, punctuation
SET C (00-99):       Numeric pairs (ultra-compact)

Codabar

DATA: 0-9 - $ : / . +
START/STOP: A B C D
Valid pairs: A-B or C-D

---

Next Steps

• For QR codes, see qr-codes.md
• For Data Matrix, see data-matrix-barcodes.md
• To customize appearance, see customization.md
• To export barcodes, see exporting-barcodes.md

QR Codes

Table of Contents

• QR Code Overview
• QR Code Versions & Capacity
• Basic QR Code Generation
• Customizing Colors
• Customizing Dimensions
• Display Text & Labels
• Adding Logos
• Logo Image Sources
• Error Correction & Data Encoding
• Dynamic QR Codes
• Common QR Code Patterns

---

QR Code Overview

QR Codes (Quick Response Codes) are two-dimensional barcodes that encode data in a grid of dark and light squares. They are universally recognized, scannable by any smartphone camera, and store significantly more data than linear barcodes.

Key Characteristics

• 2D Format: Square grid of modules (dark/light squares)
• High Data Capacity: Up to 7,089 numeric or 4,296 alphanumeric characters
• Universal Scanning: Works with any smartphone camera or dedicated scanner
• Error Correction: Built-in recovery for damaged/partially obscured codes
• Automatic Versioning: Component auto-selects version (1-40) based on data length

QR Code Versions

QR Code versions determine the grid size and data capacity:

Note: Component automatically selects appropriate version based on input data length.

---

QR Code Versions & Capacity

Numeric Data Capacity by Version

Data Type Support

• Numeric: 0-9 only → Highest density
• Alphanumeric: 0-9, A-Z, space, $%*+-./:
• Byte: Full UTF-8/Unicode support
• Kanji: Japanese characters (JIS8)

Auto Version Selection

The barcode component AUTOMATICALLY selects the minimum version that fits your data:

// Component auto-selects version:
// "Hello" (5 chars) → Version 1
// "https://example.com/very/long/path" (35 chars) → Version 2-3
// 500 chars → Version 8-9

---

Basic QR Code Generation

Simplest Implementation

<!-- app.component.html -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com" 
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Component Example

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-qr',
  template: `
    <ejs-barcodegenerator 
      type="QRCode" 
      [value]="qrValue" 
      width="250px" 
      height="250px">
    </ejs-barcodegenerator>
  `
})
export class QRCodeComponent {
  qrValue = 'https://myapp.com';
}

QR Code for Different Data Types

export class QRExamplesComponent {
  // URL - Most common
  urlQR = 'https://example.com/product/123';
  
  // Contact vCard
  contactQR = 'BEGIN:VCARD\nFN:John Doe\nTEL:+1234567890\nEND:VCARD';
  
  // WiFi Connection
  wifiQR = 'WIFI:T:WPA;S:NetworkName;P:Password;;';
  
  // Plain Text
  textQR = 'Simple text data';
  
  // Phone Number
  phoneQR = 'tel:+1234567890';
  
  // Email
  emailQR = 'mailto:contact@example.com';
}

---

Customizing Colors

QR codes should maintain high contrast with background. Colors are specified as RGB hex values or named colors.

Built-in Color Properties

Basic Color Customization

<!-- Black QR on white background (standard) -->
<ejs-barcodegenerator
  type="QRCode" 
  value="https://example.com"
  foreColor="#000000"
  backgroundColor="#FFFFFF"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Dark Theme QR Code

<!-- White QR on dark background -->
<ejs-barcodegenerator
  type="QRCode" 
  value="https://example.com"
  foreColor="#FFFFFF"
  backgroundColor="#1a1a1a"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Branded Color QR Code

<!-- Blue and light theme -->
<ejs-barcodegenerator
  type="QRCode" 
  value="https://mycompany.com"
  foreColor="#1976D2"
  backgroundColor="#F5F5F5"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Dynamic Color Component

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

@Component({
  selector: 'app-branded-qr',
  template: `
    <div>
      <select (change)="setBrandColor($event)">
        <option value="brand-blue">Brand Blue</option>
        <option value="brand-green">Brand Green</option>
        <option value="dark-mode">Dark Mode</option>
      </select>
      
      <ejs-barcodegenerator
        type="QRCode" 
        value="https://example.com"
        [foreColor]="foreColor"
        [backgroundColor]="backgroundColor"
        width="250px" 
        height="250px">
      </ejs-barcodegenerator>
    </div>
  `
})
export class BrandedQRComponent {
  foreColor = '#000000';
  backgroundColor = '#FFFFFF';

  setBrandColor(event: any) {
    const brand = event.target.value;
    if (brand === 'brand-blue') {
      this.foreColor = '#1976D2';
      this.backgroundColor = '#E3F2FD';
    } else if (brand === 'brand-green') {
      this.foreColor = '#4CAF50';
      this.backgroundColor = '#F1F8E9';
    } else if (brand === 'dark-mode') {
      this.foreColor = '#FFFFFF';
      this.backgroundColor = '#1a1a1a';
    }
  }
}

⚠️ Important Color Contrast Note

Ensure sufficient contrast for scanning:

• ✅ Good: Dark foreColor, light backColor (or vice versa)
• ❌ Bad: Similar brightness (won't scan reliably)

---

Customizing Dimensions

QR code size is controlled by width and height properties. Larger sizes are more tolerant of damage and easier to scan.

Size Guidelines

Implementation

<!-- Small QR (80×80) - Labels/documents -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  width="80px" 
  height="80px">
</ejs-barcodegenerator>

<!-- Standard QR (200×200) - Most common -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

<!-- Large QR (350×350) - Posters/displays -->
<ejs-barcodegenerator 
  type="QRCode" 
  value="https://example.com"
  width="350px" 
  height="350px">
</ejs-barcodegenerator>

Responsive QR Code

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

@Component({
  selector: 'app-responsive-qr',
  template: `
    <ejs-barcodegenerator 
      type="QRCode" 
      [value]="qrValue"
      [width]="qrSize" 
      [height]="qrSize">
    </ejs-barcodegenerator>
  `,
  styles: [`
    :host { display: block; padding: 20px; }
  `]
})
export class ResponsiveQRComponent implements OnInit {
  qrValue = 'https://example.com';
  qrSize = '200px';

  ngOnInit() {
    this.updateSizeForScreen();
    window.addEventListener('resize', () => this.updateSizeForScreen());
  }

  updateSizeForScreen() {
    const width = window.innerWidth;
    if (width < 600) {
      this.qrSize = '100px'; // Small screens
    } else if (width < 1200) {
      this.qrSize = '200px'; // Tablets
    } else {
      this.qrSize = '300px'; // Desktop
    }
  }
}

---

Display Text & Labels

Display text appears below the QR code for human-readable identification.

Basic Display Text

<ejs-barcodegenerator
  type="QRCode" 
  value="https://example.com"
  [displayText]="{ text: 'Visit our website', visibility: true }"
  width="200px" 
  height="200px">
</ejs-barcodegenerator>

Dynamic Display Text

export class LabeledQRComponent {
  qrValue = 'https://myapp.com/docs';
  displayLabel = {
    text: 'Scan for documentation',
    visibility: true
  };
  
updateLabel(newLabel: string) {
  this.displayLabel = {
    text: newLabel,
    visibility: true
  };
}
}

Common Display Text Examples

// Product promotion
displayText = { text: 'Download Our App', visibility: true }; // App store link

// Event registration
displayText = { text: 'Register Now - Event Portal', visibility: true };

// WiFi sharing
displayText = { text: 'Connect to WiFi', visibility: true };

// Contact info
displayText = { text: 'Add Contact - John Doe', visibility: true };

// Menu/reservation
displayText = { text: 'Reserve a Table', visibility: true };

---

Adding Logos

Add logos or icons to QR codes for branding while maintaining scannability.

Basic Logo Implementation

<div>
 <ejs-qrcodegenerator style="display: block;" #qrcode 
      id="qrcode" width="200px" height="150px"
      [displayText]="{visibility: true}"
      [logo]="logoConfig"
      value="Syncfusion">
</ejs-qrcodegenerator>
</div>

import { Component, ViewChild, OnInit } from '@angular/core';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';
import { QRCodeLogoModel } from '@syncfusion/ej2-barcode-generator/src/barcode/primitives/icon-model';

@Component({
  selector: 'app-branded-qr',
  templateUrl: './branded-qr.component.html'
})
export class BrandedQRComponent implements OnInit {
  @ViewChild('qrcode', { static: false }) 
  qrCode: QRCodeGeneratorComponent;
  public logoConfig: QRCodeLogoModel = {imageSource:'assets/company-logo.png',width:50, height:50 }
  ngOnInit() {
  }
}

Logo Size Guidelines

⚠️ Logo Size Limit: Logo should not exceed 25-30% of QR code size to maintain scannability.

Logo Image Sources

Logos can come from multiple sources:

1. Local File (Recommended)

const logoConfig = {
  imageSource: 'assets/logos/company-logo.png',
  width: 50,
  height: 50
};

2. Remote URL

const logoConfig = {
  imageSource: 'https://cdn.example.com/logo.svg',
  width: 50,
  height: 50
};

3. Base64 Encoded Image

const logoConfig = {
  imageSource: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
  width: 50,
  height: 50
};

4. SVG Inline

const logoConfig = {
  imageSource: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23FF0000"/></svg>',
  width: 50,
  height: 50
};

Advanced Logo Patterns

Pattern 1: Dynamic Logo Based on Product Type

import { Component, ViewChild, OnInit } from '@angular/core';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';
import { QRCodeLogoModel } from '@syncfusion/ej2-barcode-generator/src/barcode/primitives/icon-model';
export class DynamicLogoQRComponent {

@ViewChild('qrCode', { static: false })
qrCode!: QRCodeGeneratorComponent;

public logoConfig: QRCodeLogoModel = { imageSource: 'assets/logos/tech-logo.svg', width: 50, height: 50 };
  productType: string = 'tech'; // 'tech', 'retail', 'food'
  qrValue: string = 'https://example.com/product/123';
  
  logoMap = {
    tech: 'assets/logos/tech-logo.svg',
    retail: 'assets/logos/retail-logo.svg',
    food: 'assets/logos/food-logo.svg'
  };
updateLogoForProduct(type: string) {
   setTimeout(() => {
      this.productType = type;
      this.logoConfig = { imageSource: this.logoMap[type], width: 50, height: 50 };
        // Logo updates with new product type
    }, 100);
}
}

Pattern 2: Responsive Logo Size

import { Component, ViewChild, OnInit } from '@angular/core';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';
import { QRCodeLogoModel } from '@syncfusion/ej2-barcode-generator/src/barcode/primitives/icon-model';
export class ResponsiveLogoQRComponent implements OnInit {
  @ViewChild('qrCode') qrCode: QRCodeGeneratorComponent;
  
  qrSize = '200px';
  logoSize = 50;
  logoSource = 'assets/logo.svg';
  public logoConfig: QRCodeLogoModel = { imageSource: this.logoSource, width: this.logoSize, height: this.logoSize };

  ngOnInit() {
    this.updateSizes();
    window.addEventListener('resize', () => this.updateSizes());
  }

  updateSizes() {
    const width = window.innerWidth;
    
    if (width < 600) {
      this.qrSize = '120px';
      this.logoSize = 30; // QR 120×120, logo 30×30
    } else if (width < 1200) {
      this.qrSize = '200px';
      this.logoSize = 50; // QR 200×200, logo 50×50
    } else {
      this.qrSize = '300px';
      this.logoSize = 80; // QR 300×300, logo 80×80
    }
    this.logoConfig.width = this.logoSize;
    this.logoConfig.height = this.logoSize;
    
    // Updates applied to QRCodeLogo configuration
  }
}

Pattern 3: Logo with Error Handling

import { Component, ViewChild, OnInit } from '@angular/core';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';
import { QRCodeLogoModel } from '@syncfusion/ej2-barcode-generator/src/barcode/primitives/icon-model';
export class SafeLogoQRComponent {
  @ViewChild('qrCode') qrCode!: QRCodeGeneratorComponent;
  
  qrValue = 'https://example.com';
  logoSource = 'assets/logo.svg';
  logoLoaded = false;
  logoError = false;
  public logoConfig!: QRCodeLogoModel;


  applyLogo() {
    const img = new Image();
    
    img.onload = () => {
      this.logoLoaded = true;
      this.logoError = false;
      this.logoConfig = { imageSource: this.logoSource, width: 50, height: 50 };
      // Logo applied successfully
    };
    
    img.onerror = () => {
      this.logoError = true;
      this.logoLoaded = false;
      console.warn('Logo failed to load, using QR without logo');
      // Fallback: QR code without logo
    };
    
    img.src = this.logoSource;
  }

  ngAfterViewInit() {
    this.applyLogo();
  }
}

Pattern 4: Logo with Accessibility

import { ViewChild } from '@angular/core';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';
import { QRCodeLogoModel } from '@syncfusion/ej2-barcode-generator/src/barcode/primitives/icon-model';

export class AccessibleLogoQRComponent {
  @ViewChild('qrCode') qrCode!: QRCodeGeneratorComponent;

  qrValue = 'https://example.com/campaign/2026-spring';
  displayText = 'Scan to view spring campaign';
  ariaLabel = 'QR code for spring campaign - Scan with camera or QR reader app';
  ariaDescription = 'This QR code links to example.com/campaign/2026-spring and contains company logo branding to promote brand awareness.';

  logoConfig: QRCodeLogoModel = { imageSource: 'assets/logo.svg', width: 50, height: 50 };

  template = `
    <div class="qr-container">
      <ejs-qrcodegenerator
        #qrCode
        [value]="qrValue"
        width="200px"
        height="200px"
        [logo]="logoConfig"
        [displayText]="{ text: displayText, visibility: true }"
        <!-- Accessibility attributes (standard HTML/ARIA, NOT EJ2-specific properties) -->
        role="img"
        [attr.aria-label]="ariaLabel">
      </ejs-qrcodegenerator>

      <p class="sr-only">{{ ariaDescription }}</p>
      <p class="qr-label">{{ displayText }}</p>
    </div>
  `;
}

Pattern 5: Multiple Logos/Dynamic Overlay

import { ViewChild } from '@angular/core';
import { QRCodeGeneratorComponent } from '@syncfusion/ej2-angular-barcode-generator';

export class MultiLevelBrandingComponent {
  @ViewChild('qrCode') qrCode!: QRCodeGeneratorComponent;
  // Implementation note: Multiple logos require custom Canvas manipulation
  // Use single logo for standard implementation, or post-process exported image
  exportWithBadge() {
    // 1. Export QR as Base64 (supported API)
    const qrImage = this.qrCode.exportAsBase64Image('PNG');

    // 2. Create canvas for badge overlay
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d')!;
    canvas.width = 200;
    canvas.height = 200;

    // 3. Draw QR and overlay badge
    const img = new Image();
    img.onload = () => {
      ctx.drawImage(img, 0, 0);

      ctx.fillStyle = '#FFFFFF';
      ctx.beginPath();
      ctx.arc(170, 30, 20, 0, Math.PI * 2);
      ctx.fill();

      // Final image (QR + badge)
      return canvas.toDataURL('image/png');
    };
    img.src = qrImage;
  }
}

---

Logo Image Sources

QR codes support logos from multiple sources:

1. Local Image File

const logoConfig = {
  imageSource: 'assets/logo.svg',  // Relative to root
  width: 50,
  height: 50
};

// Or absolute path
const logoConfig = {
  imageSource: '/assets/images/company-logo.png',
  width: 50,
  height: 50
};

2. Remote URL

const logoConfig = {
  imageSource: 'https://cdn.example.com/logo-50x50.png',
  width: 50,
  height: 50
};

⚠️ Note: Remote images must have proper CORS headers.

3. Base64 Encoded Image

const logoConfig = {
  imageSource: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADI' +
               'AAAAA4CAIAAABNiN19AAAAqElEQVRIie3YQQqDQAxF0YnIhIk' +
               'QaQ9SEQQK7r1V95OaEIQgQqYpHzLR.....',  // Base64 string
  width: 50,
  height: 50
};

4. SVG Format

const logoConfig = {
  imageSource: `
    <svg width="50" height="50" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="45" fill="#1976D2"/>
      <text x="50" y="60" text-anchor="middle" fill="white">Logo</text>
    </svg>
  `,
  width: 50,
  height: 50
};

---

Error Correction & Data Encoding

QR codes include built-in error correction to handle damage or obstruction.

Error Correction Levels

Note: Component uses MEDIUM (15%) by default.

Data Type Encoding

// Numeric (0-9) - Most efficient
qrValue = '1234567890'; // Version 1 can hold 41 digits

// Alphanumeric (0-9, A-Z, space, special)
qrValue = 'EXAMPLE123'; // Version 1 can hold 25 chars

// Byte (UTF-8, all characters)
qrValue = 'hello@world.com'; // Version 1 can hold 17 bytes

// QR code auto-selects most efficient encoding

---

Dynamic QR Codes

Update QR code content at runtime based on user input or events.

Real-time QR Generator

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
@Component({
  selector: 'app-dynamic-qr',
  template: `
    <div class="qr-generator">
      <label>
        Enter text or URL:
        <input 
          type="text" 
          [(ngModel)]="userInput"
          (keyup)="onInputChange()">
      </label>

      <ejs-barcodegenerator 
        type="QRCode" 
        [value]="qrValue"
        [displayText]="{ text: userInput || 'Scan me', visibility: true }"
        width="250px" 
        height="250px">
      </ejs-barcodegenerator>

      <p>Data: {{ qrValue }}</p>
      <p>Size: {{ getDataSize() }} bytes</p>
    </div>
  `
})
export class DynamicQRComponent {
  userInput = 'https://example.com';
  qrValue = 'https://example.com';

  onInputChange() {
    this.qrValue = this.userInput || '';
  }

  getDataSize() {
    return new Blob([this.qrValue]).size;
  }
}

URL Parameter QR

import { OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export class URLQRComponent implements OnInit {
  qrValue!: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const productId = this.route.snapshot.paramMap.get('id');
    this.qrValue = `https://mystore.com/product/${productId}`;
  }
}

---

Common QR Code Patterns

Pattern 1: App Download Link

// iOS App Store Link
const appStoreQR = 'https://apps.apple.com/app/myapp/id123456789';

// Google Play Link
const playStoreQR = 'https://play.google.com/store/apps/details?id=com.myapp';

// Generic App Link (redirects based on device)
const appLink = 'https://myapp.com/download';

Pattern 2: vCard (Contact Info)

const contactQR = `BEGIN:VCARD
VERSION:3.0
FN:John Doe
TEL:+1-555-123-4567
EMAIL:john@example.com
ORG:Acme Corp
END:VCARD`;

Pattern 3: WiFi Connection

const wifiQR = 'WIFI:T:WPA;S:NetworkName;P:Password123;;';

Pattern 4: Event Registration

const eventQR = 'https://events.com/register?event=2026-conf&pass=' + ticketCode;

---

Next Steps

• For linear barcodes, see linear-barcodes.md
• For Data Matrix, see data-matrix-barcodes.md
• To customize appearance, see customization.md
• To export barcodes, see exporting-barcodes.md