angularx-qrcode is a fast and easy-to-use Ionic 3/4/5 and Angular4-11 QR Code component/module library to generate QR Codes (Quick Response) in your Ionic and Angular 4/5/6/7/8/9/10/11 app with support for AOT and the Ivy compiler and runtime. It is a drop-in replacement for the no-longer-maintained angular2 component ng2-qrcode and based on node-qrcode.

An Angular app with a working implementation of angularx-qrcode is available as a project in this repository. Run the command

ng serve demo-app

and open the url http://localhost:4200/ in your browser

For versions prior to 11, a working app is available at github.com/Cordobo/angularx-qrcode-sample-app.

Angular 11 requires angularx-qrcode 11:

# Angular 11 and Ionic
npm install angularx-qrcode --save
# Or use yarn
yarn add angularx-qrcode

Starting with angularx-qrcode 10, major versions of angular and angularx-qrcode are synchronized, so angular 10 requires angularx-qrcode 10, making it easier to use the right version.

# Angular 10 and Ionic
npm install [email protected] --save
# Or use yarn
yarn add [email protected]

# Angular 9 and Ionic
npm install angularx-qrcode@~2.3.5 --save
# Or use yarn
yarn add angularx-qrcode@~2.3.5

# Angular 8 and Ionic
npm install angularx-qrcode@~2.1.4 --save
# Or use yarn
yarn add angularx-qrcode@~2.1.4

# Angular 5/6/7
npm install [email protected] --save
# Angular 4
npm install [email protected] --save

• Ivy Compiler and Runtime Support
• angularx-qrcode is now based on node-qrcode and ships a couple of new features (keeping all the known features)
• New: append CSS classes with cssClass
• New elementType field: url, img, canvas and svg
• New margin field. Define how wide the quiet zone should be.
• New scale, scale factor. A value of 1 means 1px per module (black dot).
• New version field. QR Code version. If not specified the most suitable value will be calculated.

Upgrading should be simple. If any deprecated field is used, angularx-qrcode logs a warning to your browser console with the field name which should be renamed.

# Old code in 1.x
<qrcode [qrdata]="'Your data'" [size]="256" [level]="'M'" usesvg="true"></qrcode>

# New code in 2.x or 10.x
<qrcode [qrdata]="'Your data'" [width]="256" [errorCorrectionLevel]="'M'" [elementType]="'svg'"></qrcode>

// File: app.module.ts
// all your imports
import { QRCodeModule } from 'angularx-qrcode';

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

Now that Angular/Ionic knows about the new QR Code module, let's invoke it from our template with a directive. If we use a simple text-string, we need no additional code in our controller.

<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

In addition to our <qrcode>-directive in example.html, lets add two lines of code to our controller example.ts.

// File: example.ts
export class QRCodeComponent {
  public myAngularxQrCode: string = null;
  constructor () {
    // assign a value
    this.myAngularxQrCode = 'Your QR code data string';
  }
}

// File: example.html
<qrcode [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Depending on the amount of data of the qrdata to encode, a minimum width is required.

angularx-qrcode supports AOT Compilation (Ahead-of-Time Compilation) which results in significant faster rendering. An AOT-enabled module is included. Further reading: https://angular.io/guide/aot-compiler

As of version 1.6.0, SSR support is fully implemented, the following workaround is no longer needed. HowTo use Angular QRCode with SSR

# Build
npm run build

• Please open your PR against the development branch.
• Make sure your editor uses the packages .editorconfig file to minimize commited code changes.
• Use npm run lint before you commit

MIT License

Copyright (c) 2018 - present Andreas Jacob (Cordobo.com)