@smartcodelab/ngx-qrcode NPM

@smartcodelab/ngx-qrcode

This is Angular (version 6+) component, for Generating QR Codes;

Installation

Step1 : Dependency Installation

To install qrcode library, run:

$ npm install qrcode --save (dependency module)
or
$ yarn add qrcode

Step 2 : @smartcodelab/ngx-qrcode Installation

To install @smartcodelab/ngx-qrcode library, run:

$ npm install @smartcodelab/ngx-qrcode --save
or
$ yarn add @smartcodelab/ngx-qrcode

Consuming @smartcodelab/ngx-qrcode library

In your Angular AppModule: (or other Module as required by your project)

import { NgxQrcodeModule } from '@smartcodelab/ngx-qrcode';


@NgModule({
  imports: [
    /* Along with import of all other Modules...*/

    NgxQrcodeModule
  ]
})
export class AppModule {}

Once your library is imported, you can use it in your Angular component.

Method 1:

In .html file

<div style="text-align:center">
  <h2>Below component generates QR code for the element-"test" with options that we have configured in "[options]=options".  </h2>
  <scl-ngx-qrcode text="test" [options]=options></scl-ngx-qrcode>
</div>

In .ts file

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app';
  options : any  = {
    errorCorrectionLevel: "M",
    type: "Image/jpeg",
    quality: 0.5,
    margin: 5,
    scale: 5,
    darkColor: "#001900",
    lightColor: "#00ff00",
    width: 200
  };
}

Method 2:

In .html file we can directly provide options seperately for each config.

<div style="text-align:center">
  <h2>Below component generates QR code for the element-"test" with options that we have configured in "[options]=options".  </h2>
  <scl-ngx-qrcode text="test" [width]=200 [darkColor]"#001900"></scl-ngx-qrcode>
</div>

In .ts file no need to configure any options.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'app'; 
}

Usage: qrcode options :

`text`

Type: String

Text to encode or a list of objects describing segments.

`errorCorrectionLevel`

Type: String Default: M

Error correction level. Possible values are low, medium, quartile, high or L, M, Q, H.

`type`

Type: String Default: image/png

Data URI format. Possible values are: image/png, image/jpeg, image/webp. Note: image/webp only works in Chrome browser.

`margin`

Type: Number Default: 4

Define how much wide the quiet zone should be.

`scale`

Type: Number Default: 4

Scale factor. A value of 1 means 1px per modules (black dots).

`quality`

Type: Number Default: 0.92

A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp.

`darkColor`

Type: String Default: #000000ff

Color of dark module. Value must be in hex format (RGBA). Note: dark color should always be darker than lightColor.

`lightColor`

Type: String Default: #ffffffff

Color of light module. Value must be in hex format (RGBA).

`width`

Type: Number

Forces a specific width for the output image. If width is too small to contain the qr symbol, this option will be ignored. Takes precedence over scale.