HelpBot Assistant

How can I help you?

Getting Started with Angular Barcode Component

9 Feb 20268 minutes to read

This section explains how to create your first barcode and introduces the basic features of the Barcode component.

Ready to streamline your Syncfusion® Angular development? Discover the full potential of Syncfusion® Angular components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. Explore Syncfusion® AI Coding Assistant

Prerequisites

System requirements for Syncfusion Angular UI components

Dependencies

The following dependencies are required to use the Barcode component in your application:

|-- @syncfusion/ej2-angular-barcode-generator
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data

Setup Angular Environment

Use Angular CLI to set up your Angular applications. Install Angular CLI globally with the following command:

npm install -g @angular/cli

Create an Angular Application

Generate a new Angular project using the Angular CLI command below.

ng new my-barcode-app

When prompted, choose your preferred stylesheet format:

? Which stylesheet system would you like to use?
> CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ]
  Tailwind CSS    [ https://tailwindcss.com                                        ]
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less            [ http://lesscss.org                                             ]

By default, CSS is used. For SCSS, see the Sass guide.

Then navigate to the project directory:

cd my-barcode-app

Installing Syncfusion® Barcode package

All Essential JS 2 packages are available on npmjs.com. Install the Angular Barcode package:

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

NOTE

The –save flag adds the package to the dependencies section of package.json.

Registering Barcode Module

Import the Barcode modules in src\app\app.ts from the package @syncfusion/ej2-angular-barcode-generator and enable it for your component.

import { BarcodeGeneratorModule,QRCodeGeneratorModule,DataMatrixGeneratorModule } from '@syncfusion/ej2-angular-barcode-generator'
import { Component } from "@angular/core";

@Component({
selector: 'app-root',
//Import Barcode modules
imports: [  BarcodeGeneratorModule, QRCodeGeneratorModule ,DataMatrixGeneratorModule  ],
// specifies the template string for the barcode component
template: `<ejs-barcodegenerator  id="barcode" width="200px" height="150px" value="123456789">`,
})
export class App {}

Render the Barcode component

Add the <ejs-barcodegenerator> selector to the template in src\app\app.ts, and specify a width and height to ensure the barcode renders correctly.

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

@Component({
selector: 'app-root',
//Import Barcode module
imports: [ BarcodeGeneratorModule ],
// specifies the template string for the barcode component
template: `<ejs-barcodegenerator  id="barcode" width="200px" height="150px" value="123456789">`,
})
export class App {}

Run the Application

Start the dev server:

npm start

Open the browser using the printed URL to see the Barcode.

NOTE

The selector specified in the @Component decorator of the app.ts file must match the custom element tag used in the index.html file. For example, if your @Component decorator includes the selector “app-root”, your index.html file should include an element <app-root></app-root>.

Adding Barcode Generator control

Start adding the Syncfusion® Angular Barcode Generator component to the application. The following code demonstrates how to create a basic linear barcode in the app.component.ts and corresponding template files:

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



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

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

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

The above example creates a basic Code 128 barcode. Linear barcodes are ideal for product identification, inventory management, and retail applications.

Adding QR Generator control

QR codes provide two-dimensional data encoding capabilities and are perfect for storing URLs, contact information, or other text data. Add a QR code to the Angular Barcode Generator component as shown below:

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



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

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

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

QR codes are commonly used for mobile applications, marketing campaigns, and quick data sharing scenarios.

Adding Data Matrix Generator control

Data Matrix codes offer high data density in a compact square format, making them suitable for small items and applications requiring space efficiency. Add a Data Matrix code to the Angular Barcode Generator component:

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



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

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

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

See also