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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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...');
  }
}

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

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

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

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