Angular4+ QRCode Generator Component

Say hello to my new Angular QR Code module, called angularx-qrcode. It’s not only a drop-in replacement for the no-longer-maintained ng2-qrcode component to generate and display QR Codes, it’s as well heavily optimized for Angular 4+ and Ionic 3+.

angularx-qrcode supports Angulars AOT Compilation (Ahead-of-Time Compilation), which results in significant faster rendering. It’s as well available as webpack’ed common.js and es2015-module, not to mention, it’s open-sourced under the MIT licence.

Install angularx-qrcode

NPM

YARN

Basic Usage

Import the module and add it to your imports section in your main AppModule (file: app.module.ts)

Examples: How to use angularx-qrcode

Generate a QR Code from a string (directive only)

Now that our Angular/Ionic app knows about our new QR Code module, we can invoke it in our template with a directive. If we use a simple text-string, we need no additional code in our controller class:

Create a QR Code from a variable in your controller class

In addition to our -directive in example.html from above, we add two new lines of code to our controller example.ts.

Parameters

The entire parameters-list can be found on it’s github page.

Contribute or send in your issues

Let me know if you have any issues or fork and contribute to angularx-qrcode on the github repository github.com/Cordobo/angularx-qrcode.

Leave a Reply

Your email address will not be published. Required fields are marked *