Angular Barcode Component

The Barcode component for Angular allows you to create complex layouts fast and easy. It can operate as a Splitter and as a Docking Layout.

jqxBarcode for Angular - Getting Started

Prerequisites

Ensure you have Angular installed and jqwidgets-ng package added to your Angular project.

npm install jqwidgets-ng --save

Step 1: Import Required Modules

Import the jqxBarcodeModule in your standalone Angular component:


import { Component } from '@angular/core';
import { jqxBarcodeModule } from 'jqwidgets-ng/jqxbarcode';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [jqxBarcodeModule],
  template: `
    <jqxBarcode 
      [value]="'1234567890'" 
      >
    </jqxBarcode>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {}

Step 2: Customizing jqxBarcode

You can customize the jqxBarcode component by using various properties:


<jqxBarcode 
  [value]="'QR Code Content'" 
  [symbology]="'QR'" 
  [width]="'250px'" 
  [height]="'250px'" 
  [color]="'#000000'" 
  [background]="'#FFFFFF'">
</jqxBarcode>

Step 3: Accessing jqxBarcode Methods

You can access the methods of jqxBarcode using @ViewChild:


import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';

@Component({
  selector: 'app-root',
  template: '<jqxBarcode #myBarcode></jqxBarcode>'
})
export class AppComponent implements AfterViewInit {
  @ViewChild('myBarcode') myBarcode: jqxBarcodeComponent;

  ngAfterViewInit() {
    this.myBarcode.refresh();  // Calling refresh method after the component is initialized
  }
}

Conclusion

You’ve successfully integrated the jqxBarcode widget in Angular. For more information, please refer to the jqxBarcode API documentation.

jqxBarcode API

API Reference of the jQWidgets jqxBarcode component for Angular: Barcode API