angularx-qrcode - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library

• Compatible with Angular 19 and Ionic
• Under active development
• Standalone component support
• Ivy compiler support, AOT, SSR (Server Side Rendering)
• Accessibility (a11y) attributes supported (alt, aria-label, title)
• Support for images
• Trusted and used by thousands of developers like you
• Easy to use, sample web app included

angularx-qrcode is compatible with Ionic 3/4/5/6/7/8 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16/17/18/19+ with support for the Ivy compiler. It is a drop-in replacement for the no-longer-maintained angular component ng2-qrcode and based on node-qrcode.

• Installation
• Demo App
• Usage & Example Implementations
• Available Parameters
• Contribute
• Sponsoring
• License

Angular 19 and Ionic with angularx-qrcode 19

npm install angularx-qrcode --save
# Or with yarn
yarn add angularx-qrcode

Angular 18 and Ionic with angularx-qrcode 18

npm install angularx-qrcode@18.0.2 --save
# Or with yarn
yarn add angularx-qrcode@18.0.2

Angular 17 and Ionic with angularx-qrcode 17

npm install angularx-qrcode@17.0.1 --save
# Or with yarn
yarn add angularx-qrcode@17.0.1

All supported angular versions

Working online demo of Angular QR Code Generator

The source for the working angular app is available in projects/demo-app.

Run the command:

npm start

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

The source for a live angularx-qrcode demo app and more examples how to implement angularx-qrcode is located in the directory projects/demo-app of this repository.

Since Angular 19, the latest version of the angularx-qrcode module is now exported as a standalone component. If you’re upgrading from a version before Angular 19, please replace the import statement with the component’s name since it’s now a standalone component.

# OLD - angular 18 and older
# File: app.module.ts
import { QRCodeModule } from 'angularx-qrcode';

# NEW - angular 19 and newer
// File: app.component.ts
import { QRCodeComponent } from 'angularx-qrcode';

For more uses with angular 18 and earlier see: angularx/qrcode as ngModule

// For angular 19, see above for angular 18 and older
// File: app.component.ts
// other imports...
import { QRCodeComponent } from 'angularx-qrcode';

@Component({
  selector: "app-root",
  imports: [
    // other component imports...
    QRCodeComponent,
  ],
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
})
export class AppComponent {
  // your code
}

// File: app.component.html
// all your HTML...

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

Now that angular/Ionic know about the new QR Code component, let's invoke it from our template. 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 app.component.html, lets add two lines of code to our controller app.component.ts.

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

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

The online demo contains a working sample how to download the QR Code with a button.

To download the QR Code, we have to use the qrCodeURL attribute of the <qrcode> which returns a sanitized URL representing the location of the QR Code.

// File: example.ts
export class QRCodeComponent {
  public myAngularxQrCode: string = "";
  public qrCodeDownloadLink: SafeUrl = "";

  constructor () {
    this.myAngularxQrCode = 'Your QR code data string';
  }

  onChangeURL(url: SafeUrl) {
    this.qrCodeDownloadLink = url;
  }
}

// File: example.html
<qrcode (qrCodeURL)="onChangeURL($event)" [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
<a [href]="qrCodeDownloadLink" download="qrcode">Download</a>

The file format obtained by qrCodeURL depends directly on the elementType of <qrcode>. If it's either canvas, url or image, it returns an image as .png, if it's svg, returns a .svg file.

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

• Please open your PR against the development branch.
• Make sure your editor uses prettier to minimize commited code changes.
• You cannot contribute but want to support development? Consider a sponsorship.

Support the development of angularx-qrcode (or even see your logo here?), consider sponsoring angularx-qrcode. Your support is much appreciated!

MIT License

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