Properties

NameTypeDefault
backgroundColor string white
Sets the background color of the QR Code element. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [backgroundColor]='"yellow"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
displayLabel boolean false
Sets whether the QR Code label is visible. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [displayLabel]='true'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
embedImage string
Sets an embedded image. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [embedImage]='"L"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
errorLevel string H
Sets the error correction level. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [errorLevel]='"L"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
imageHeight number 15
Sets the height of the embedded image. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [imageHeight]='30'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
imageWidth number 15
Sets the width of the embedded image. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [imageWidth]='30'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
labelColor string black
Sets the color of the QR Code label. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [labelColor]='"red"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
labelFont string monospace
Sets the font family of the QR Code label. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [labelFont]='"monospace"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
labelFontSize number 14
Sets the font size of the QR Code label. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [labelFontSize]='16'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
labelMarginBottom number 5
Sets the bottom margin of the QR Code label. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [labelMarginBottom]='16'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
labelMarginTop number 5
Sets the top margin of the QR Code label. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [labelMarginTop]='16'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
labelPosition string bottom
Sets the position of the QR Code label. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [labelPosition]='"bottom"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
lineColor string black
Sets the color of the QR Code lines. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [lineColor]='"black"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
squareWidth number 7
Sets the width of the QR Code square. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [squareWidth]='9'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
renderAs string svg
Sets the rendering mode of the QR Code. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [renderAs]='"svg"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}
value string
Sets or gets the value of the QR Code. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
       [value]='"example"'>
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
}

Events

invalid Event
This event is triggered when the value of the QR Code is invalid.

Code examples

Bind to the invalid event of jqxQRcode. 

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

Methods

NameArgumentsReturn Type
export format, fileName
Exports the QR Code. 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
      >
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
  
  public ngAfterViewInit(): void {
    this.myQRcode.export('png');
  }
}
getDataURL format
Gets the base64 string of the QR Code 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
      >
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
  
  public ngAfterViewInit(): void {
    const url = this.myQRcode.getDataURL();
  }
}
getDataURLAsync format
Gets the base64 string of the QR Code 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
      >
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
  
  public ngAfterViewInit(): void {
    const urlPromise = this.myQRcode.getDataURLAsync();
  }
}
isValid
Gets the validity of the QR Code 
import { Component, ViewChild } from '@angular/core';
 
import { jqxQRcodeComponent } from 'jqwidgets-ng/jqxqrcode';
 
@Component({
  selector: 'app-root',
  template:
    `<jqxQRcode #myQRcode 
      >
    </jqxQRcode>`,
  styles: [``]
})
 
export class AppComponent {
  @ViewChild('myQRcode', { static: false }) myQRcode: jqxQRcodeComponent;
  
  public ngAfterViewInit(): void {
    const isValid = this.myQRcode.isValid();
  }
}