Sets the background color of the qrcode element.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [backgroundColor]='"yellow"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets whether the qrcode label is visible.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [displayLabel]='true'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the color of the qrcode label.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [labelColor]='"red"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the font family of the qrcode label.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [labelFont]='"monospace"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the font size of the qrcode label.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [labelFontSize]='16'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the bottom margin of the qrcode label.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [labelMarginBottom]='30'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the top margin of the qrcode label.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [labelMarginTop]='30'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the position of the qrcode label.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [labelPosition]='"top"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the color of the qrcode lines.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [lineColor]='"red"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the height of the qrcode line.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [lineHeight]='50'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the width of the qrcode line.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [lineWidth]='7'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the rendering mode of the qrcode.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [renderAs]='"canvas"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets the qrcode type

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [type]='"code128a"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

Sets or gets the value of the qrcode.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
       [value]='"example"'>
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
}

This event is triggered when the value of the qrcode is invalid.

Code examples

Bind to the invalid event of jqxBarcode.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode (onInvalid)="onInvalid($event)" 
      >
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
  
  public onInvalid(e: Event): void {
    alert('do something...');
  }
}

Exports the qrcode.

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
      >
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
  
  public ngAfterViewInit(): void {
    this.myBarcode.export('png');
  }
}

Gets the base64 string of the qrcode

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
      >
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
  
  public ngAfterViewInit(): void {
    const url = this.myBarcode.getDataURL();
  }
}

Gets the base64 string of the qrcode

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
      >
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
  
  public ngAfterViewInit(): void {
    const urlPromise = this.myBarcode.getDataURLAsync();
  }
}

Gets the validity of the qrcode

import { Component, ViewChild } from '@angular/core';
 
import { jqxBarcodeComponent } from 'jqwidgets-ng/jqxbarcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxBarcode #myBarcode 
      >
    </jqxBarcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myBarcode', { static: false }) myBarcode: jqxBarcodeComponent;
  
  public ngAfterViewInit(): void {
    const valid = this.myBarcode.isValid();
  }
}