Getting started with Angular Barcode component

24 Aug 20256 minutes to read

This section explains the steps required to create a simple barcode and demonstrates the basic usage of the Syncfusion® Angular Barcode component. The component supports various barcode types including linear barcodes, QR codes, and Data Matrix codes.

Setup Angular Environment

Use Angular CLI to set up Angular applications.
To install Angular CLI, use the following command:

npm install -g @angular/cli

Create an Angular Application

Start a new Angular application using the Angular CLI command below:

ng new my-app
cd my-app

Installing Syncfusion® Barcode Generator package

Syncfusion® packages are distributed in npm as @syncfusion scoped packages. All Angular Syncfusion® packages are available from npm link.

Currently, Syncfusion® provides two types of package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (Angular’s legacy compilation and rendering pipeline) package

Ivy library distribution package

Syncfusion® Angular packages (>=20.2.36) have moved to the Ivy distribution to support the Angular Ivy rendering engine. These packages are compatible with Angular version 12 and above. To download the package, use the command below:

Add the @syncfusion/ej2-angular-barcode-generator package to the application:

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

Angular compatibility compiled package (ngcc)

For Angular versions below 12, use the legacy (ngcc) package of the Syncfusion® Angular components. To download the ngcc package, use the command below:

Add the @syncfusion/ej2-angular-barcode-generator@ngcc package to the application:

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

To specify the ngcc package in the package.json file, add the suffix -ngcc with the package version as shown below:

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

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will display a warning.

Adding Syncfusion® Barcode Generator package

All the available Essential® JS 2 packages are published in npmjs.com registry.

To install Barcode Generator component, use the following command.

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

The –save will instruct NPM to include the barcode generator package inside of the dependencies section of the package.json.

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