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

npm install angularx-qrcode --save

YARN

yarn add angularx-qrcode

Basic Usage

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

// all your imports
import { QRCodeModule } from 'angularx-qrcode';

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

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:

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>

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.

export class QRCodeComponent {
    public angularxQrCode: string = null;
    constructor () {
        // assign a value
        this.myAngularxQrCode = 'Your QR code data string';
    }
}
<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>

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.

Comments are closed.