ASW QR Code

ASW QR Code library for generating QR Code for Angular projects.

Live Demo

Install ASW QR Code

Install QR Code to set up in the project by running the following command:

npm install @asoftwareworld/qrcode

Import the component modules

Import the NgModule for each component you want to use:

import { AswQrCodeModule } from '@asoftwareworld/qrcode';
// ...

@NgModule({
  imports: [
    // shown passing global defaults (optional)
    AswQrCodeModule
    ...
  ]
  // ...
})
export class AppModule {}

Add a selector to HTML

In your template, use the component selector:

<asw-qr-code [value]="value" 
    [size]="size"
    [errorCorrectionLevel]="errorCorrectionLevel"
    [centerImageSrc]="centerImageSrc"
    [centerImageSize]="centerImageSize">
</asw-qr-code>

Define in your component to get published event :

export class AppComponent {
    title = 'qr-code-demo';
    value = 'https://asoftwareworld.com/';
    size = 180;
    errorCorrectionLevel = AswQrcodeErrorCorrectionLevel.LOW;
    centerImageSrc = 'https://angular.io/assets/images/logos/angular/angular.png';
    centerImageSize = 180;
}

List of values

Values	Description
value (required)	The value to encode in the QR code i.e. a URL, Text, etc.
size (optional)	Automatic size based on the value provided in pixels
errorCorrectionLevel (optional)	Error correction capability allows to successfully scan a QR Code even if the symbol is dirty or damaged. Four levels are available to choose according to the operating environment. Default value: `MEDIUM` and Valid values: `LOW`, `MEDIUM`, `QUARTILE`, `HIGH` See more details
centerImageSrc (optional)	A center image src property to load and render image in the center of the QR code.
centerImageSize (optional)	Automatic size in pixels to render the center image.
colorDark (optional)	use for dark color
colorLight (optional)	use for light color

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Report a bug

We use GitHub Issues as the official bug tracker for the ASW QR Code. Here are some advices for our users that want to report an issue:

Make sure that you are using the latest version of the ASW QR Code.
Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
Some issues may be browser specific, so specifying in what browser you encountered the issue might help.