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

Example App

An Angular5 sample app with a working implementation of angularx-qrcode is available on github.com/Cordobo/angularx-qrcode-sample-app.

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.

2 Replies to “Angular4+ QRCode Generator Component”

  1. Hi man! I tried use your component in my aot project and it not works. It launch a reference error Document is not defined in the server side.

Leave a Reply to Roland Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.