QR Code Generator in Angular Barcode component

24 Aug 20259 minutes to read

QR Code Overview

A QR Code is a two-dimensional barcode that consists of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40 that measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Codes are designed for industrial uses and are also commonly used in consumer advertising.

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

Customizing QR Code Colors

A page or printed media with QR codes often appears colorful in the background and surrounding region with other contents. In such cases, the QR code can be customized to suit the design requirements. The foreground color of the QR code can be changed using the foreColor property.

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

Customizing QR Code Dimensions

The dimensions of the QR code can be changed using the height and width properties of the QR code generator. These properties allow precise control over the QR code size to fit various design layouts and printing requirements.

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

Customizing Display Text

In QR code generators, the display text shown below the QR code can be customized using the displayText property. This allows for user-friendly labels or alternative text representations of the encoded data.

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



import { Component ,ViewChild} from "@angular/core";
import { BarcodeGeneratorComponent,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-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" height="150px" [displayText] = 'displayText' mode="SVG" value="Syncfusion"></ejs-qrcodegenerator>`
})
  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));

Enhancing QR Codes with Logos

The Angular Barcode Generator enables adding a logo or icon to QR codes, enhancing their visual appeal, brand recognition, and authenticity. Adding a recognizable logo can make it easier for users to identify the source and can help establish trust and brand presence.

Supported Image Sources

The imageSource property of the QRCodeLogo class supports the following image sources:

  • Local image path: Specify the path to the image file relative to the project’s root directory (e.g., images/syncfusion.png) or as an absolute path (e.g., /assets/icons/logo.svg).
  • Remote image URL: Provide the web address of the image file (e.g., https://example.com/image.jpg).
  • Base64 encoded image data: Embed the image data directly in the code using a Base64-encoded string (e.g., data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...).

Logo Dimensions and Guidelines

The width and height properties of the QRCodeLogo class define the dimensions of the logo in pixels. If not specified, both default to 30% of the QR code’s size. The maximum allowed size is 30% of the QR code’s dimensions to ensure optimal readability and successful scanning.

Important: Always test the readability of QR codes after adding a logo. Depending on the logo size and QR code content complexity, it may be necessary to adjust the errorCorrectionLevel property of the QRCodeGenerator to "Medium" or "High" for better reliability and error recovery.

The following image illustrates a QR code with logo:

QR code with logo

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



import { Component ,ViewChild} from "@angular/core";
import { BarcodeGeneratorComponent  } 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-qrcodegenerator style="display: block;"  #barcode id="barcode" width="200px" height="150px" [logo] = 'logo' mode="SVG" value="Syncfusion"></ejs-qrcodegenerator>`
})
  export class AppComponent {
    // @ViewChild('barcode')
    @ViewChild('logo')
    public logo?: any;
    ngOnInit(): void {  
      this.logo = {
        imageSource:'https://www.syncfusion.com/web-stories/wp-content/uploads/sites/2/2022/02/cropped-Syncfusion-logo.png'
      }
    }
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));