npm package: @smartcodelab/ngx-qrcode
Description: > This is Angular (version 6+) component, for Generating QR Codes;
Latest version: 1.0.3

# @smartcodelab/ngx-qrcode

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

## Installation

Step1 : Dependency Installation

To install qrcode library, run:

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

Step 2 : @smartcodelab/ngx-qrcode Installation 

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

```bash
$ 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)

```typescript
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

```html
<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

```typescript
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.

```html
<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.

```typescript
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`<br>
  Default: `M`

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

###### `type`
  Type: `String`<br>
  Default: `image/png`

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

##### `margin`
  Type: `Number`<br>
  Default: `4`

  Define how much wide the quiet zone should be.

##### `scale`
  Type: `Number`<br>
  Default: `4`

  Scale factor. A value of `1` means 1px per modules (black dots).
 ###### `quality`
  Type: `Number`<br>
  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`<br>
  Default: `#000000ff`

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

  ##### `lightColor`
  Type: `String`<br>
  Default: `#ffffffff`

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


##### `width`
  Type: `Number`<br>

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


## License

MIT

[npm-url]: https://www.npmjs.com/package/@smartcodelab/ngx-qrcode