DataMatrix Generator in Angular Barcode component

24 Aug 20256 minutes to read

Data Matrix

DataMatrix is a two-dimensional barcode that consists of a grid of dark and light squares forming a square or rectangular symbol. The data encoded in the barcode can be either numeric or alphanumeric characters. DataMatrix barcodes are widely used in printed media such as labels, letters, and packaging due to their high data density and error correction capabilities. These barcodes can be easily read using barcode scanners and mobile devices.

DataMatrix barcodes are particularly suitable for applications requiring compact encoding of large amounts of data in small spaces, making them ideal for industries such as healthcare, manufacturing, and logistics.

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));

Customizing the Barcode color

When barcodes are placed on colorful backgrounds or printed media with various design elements, customizing the barcode color becomes essential for maintaining readability and visual harmony. The foreColor property allows you to modify the barcode’s appearance to match your design requirements while ensuring optimal contrast for scanning.

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" foreColor="red" 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));

Customizing the Barcode dimension

The physical size of the barcode is crucial for ensuring proper scanning and fitting the barcode within available space constraints. The height and width properties of the barcode generator allow you to adjust the barcode dimensions according to your specific layout requirements and scanning distance considerations.

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="300px" height="300px" 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));

Customizing the text

The display text feature allows you to show human-readable text alongside the barcode, making it easier for users to verify the encoded data without requiring a scanner. The displayText property enables you to customize the visible text that appears below the DataMatrix barcode, which can be different from the actual encoded data if needed.

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



import { Component ,ViewChild ,ViewEncapsulation} from "@angular/core";
import { DisplayTextModel } from "@syncfusion/ej2-angular-barcode-generator";

@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" [displayText] = 'displayText' mode="SVG" type="DataMatrix" value="Syncfusion"></ejs-datamatrixgenerator>`
})
export class AppComponent {
  //  @ViewChild('barcode')
   @ViewChild('displayText')
   public displayText?: DisplayTextModel;
   ngOnInit(): void {  

     this.displayText = {
       text:'text'
     }
   }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));