Skip to main content 홈 크리에이터 syncfusion angular-ui-components-skills syncfusion-angular-barcode
syncfusion-angular-barcode Use Syncfusion EJ2 Angular Barcode/QR components to generate and customize barcodes in Angular. Trigger for Code39/Code128, EAN/UPC, QR Code, Data Matrix, label printing, inventory/product tags, colors/sizing/text, logo overlays, rendering, and export (PNG/SVG/PDF).
설치로 이동 Skills Marketplace 커뮤니티가 만든 AI 스킬을 발견하고 탐색하세요.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
직접 명령은 검토 Prompt를 거치지 않습니다. 실행하기 전에 소스를 확인하세요.
npx skills add https://github.com/syncfusion/angular-ui-components-skills --skill syncfusion-angular-barcode명령은 한 줄로 유지됩니다. 복사하기 전에 가로로 스크롤해 전체 내용을 확인하세요.
로컬 사본을 원하시나요? SkillsMP에서 현재 제공할 수 있는 파일을 다운로드하세요.
Zip 다운로드 다운로드 중... syncfusion-angular-calendars Comprehensive guide for implementing Syncfusion Angular Calendar components including Calendar, DatePicker, DateRangePicker, DateTimePicker, and TimePicker. Covers installation, data binding, date/time selection, range selection, formatting, localization, masking, validation, customization, templates, accessibility, and controlled component patterns in Angular applications.
syncfusion-angular-data-manager Implements Syncfusion Angular DataManager for local/remote binding, CRUD, querying, caching, and middleware. Supports JsonAdaptor, ODataAdaptor, ODataV4Adaptor, UrlAdaptor, WebApiAdaptor, WebMethodAdaptor, RemoteSaveAdaptor, GraphQLAdaptor, CustomDataAdaptor, and CustomAdaptor. Covers Query class, filtering, sorting, paging, grouping, persistence, offline mode, caching, and error handling.
Implements Syncfusion Angular Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
name syncfusion-angular-barcode description Use Syncfusion EJ2 Angular Barcode/QR components to generate and customize barcodes in Angular. Trigger for Code39/Code128, EAN/UPC, QR Code, Data Matrix, label printing, inventory/product tags, colors/sizing/text, logo overlays, rendering, and export (PNG/SVG/PDF). metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Data Visualization"}
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 managementGenerate QR codes for URLs, contact info, and quick data sharingEncode 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 stringsAdd 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 Type Use Case Character Set Industry Linear (Code39, Code128, Code11, Codabar, Code32, Code93) Product IDs, serial numbers, inventory Alphanumeric (varies by type) Retail, Warehouse, Telecom QR Code URLs, contact info, payments Full Unicode Marketing, Mobile, Finance Data Matrix Compact encoding, small labels Numeric/Alphanumeric Healthcare, Manufacturing, Logistics
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
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.)
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
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
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
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
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
<ejs-barcodegenerator
#barcode
type ="Code128"
value ="123456789"
width ="200px"
height ="150px" >
</ejs-barcodegenerator >
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
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
@barcode type ="Code128" foreColor="#000000" backgroundColor="#FFFFFF"
@barcode type ="Code128" foreColor="#FFFFFF" backgroundColor="#000000"
@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' );
}
}
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 Property Type Use When Default typestring Selecting barcode type (Code128, QRCode, DataMatrix) Code128 valuestring Setting encoded data "" widthstring Controlling barcode width (px, %) Auto heightstring Controlling barcode height (px, %) Auto foreColorstring Setting barcode color (#RGB or name) #000000 backgroundColorstring Setting background color #FFFFFF displayTextobject { visibility: false }Adding human-readable label below barcode marginobject Adding space around barcode {left: 0, right: 0, top: 0, bottom: 0} qRCodeLogoobject Adding logo to QR code (imageSource, width, height) undefined modestring Rendering mode (SVG or Canvas) SVG
Common Use Cases
Use Case 1: Retail Product Labeling System
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
<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
<ejs-barcodegenerator
type ="DataMatrix"
[value]="medicineTrackingCode"
[displayText]="{ text: 'Product SKU: 123456789', visibility: true }"
width="80px"
height="80px" >
</ejs-barcodegenerator>
Next Steps 