Cordobo

Angular QR Code Generator Component

Update: Latest update supports Angular 19 and standalone components.

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 and Ionic.

angularx-qrcode supports Angulars Ivy compiler and 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 and 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

The source code for an Angular 18 sample app with a working implementation of angularx-qrcode is available on projects/demo-app.
A sample app for older versions is available on github.com/Cordobo/angularx-qrcode-sample-app.

Demo App

See working online demo of Angular QR Code Generator

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.

Andreas Jacob

, , , , , , , , , ,