@techiediaries/ngx-qrcode

! ⚠️ WARNING: The NPM package ngx-qrcode2 has been deprecated. Use @techiediaries/ngx-qrcode instead.

@techiediaries/ngx-qrcode An Angular Component library for Generating QR (Quick Response ) Codes.

You can use the @techiediaries/ngx-qrcode to easily generate QR codes inside your Angular 6 or Ionic 3 applications

QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to efficiently store data; extensions may also be used. Source

How to install @techiediaries/ngx-qrcode?

To use ngx-qrcode in your project, install it via npm or yarn:

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

How to use @techiediaries/ngx-qrcode?

For a complete and detailed tutorial on how to use this library. See:

How to Generate QR Codes In Angular 4+ Applications

Import NgxQRCodeModule from @techiediaries/ngx-qrcode into your app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxQRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once the library has been imported, you can use the ngx-qrcode component in your Angular application.

In app.component.html, add:

<div style="text-align:center">
  <h1>
    @techiediaries/ngx-qrcode demo 
  </h1>
</div>

<ngx-qrcode 
  [elementType]="elementType" 
  [value]="value"
  cssClass="aclass"
  errorCorrectionLevel="L">
</ngx-qrcode>

In app.component.ts, add:

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

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

Contributing

Please see Contributing Guidelines.

How to develop @techiediaries/ngx-qrcode?

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build
or
$ yarn build

To lint all *.ts files:

$ npm run lint
or
$ yarn lint

How to run unit tests?

In development mode:

$ npm run test:watch ngx-qrcode
or
$ yarn test:watch ngx-qrcode

Add --codeCoverage option to see code coverage in coverage folder.

How to publish libraries?

$ npm run lib:publish
or
$ yarn lib:publish

Code of Conduct

Please see Code of Conduct.

License

MIT © Techiediaries

Troubleshoots

With Angular CLI 8.X.X you should add this lines to polyfills.ts

// Needed by Buffer needed by QRCode
// tslint:disable-next-line:no-string-literal
(window as any)['global'] = window;

9.1.0 (2020-08-11)

Code Refactoring

• packaging: rename NPM to @techiediaries/ngx-qrcode (932d26d), closes #47

Features

• changelog: add changelog generation (0e962ca)

BREAKING CHANGES

• packaging: rename this package, @techiediaries/ngx-qrcode must be used instead

9.0.0 (2020-04-28)

Bug Fixes

• core: Remove the alt attribute when undefined.

Features

• lib: support for angular v9
• core: Create unit tests with 100% of code coverage
• core: Fix lint

Refactor

• core: Create types, constants and enums to type component inputs.

BREAKING CHANGES

• lib: Rename properties to follow angular style guide

Before:

[qrc-element-type] 
[qrc-class] 
[qrc-alt] 
[qrc-value] 
[qrc-version]
[qrc-errorCorrectionLevel]
[qrc-margin]
[qrc-scale]
[qrc-width]
[qrc-colorDark]
[qrc-colorLight]

After:

[elementType]
[cssClass]
[alt]
[value]
[version]
[errorCorrectionLevel]
[margin]
[scale]
[width]
[colorDark]
[colorLight]