angularx-qrcode - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library
- Compatible with Angular and Ionic
- Ivy compiler support, AOT, SSR (Server Side Rendering)
- Under active development
- Accessibility (a11y) attributes supported (alt, aria-label, title)
- Support for images
- Trusted and used by thousands of developers like you
angularx-qrcode is compatible with Ionic 3/4/5 and Angular 4/5/6/7/8/9/10/11/12/13/14/15/16+ 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.
Angular 16 and Ionic with angularx-qrcode 16
npm install angularx-qrcode --save
# Or with yarn
yarn add angularx-qrcode
Angular 15 and Ionic with angularx-qrcode 15
npm install angularx-qrcode@15.0.1 --save
# Or with yarn
yarn add angularx-qrcode
Angular 14 and Ionic with angularx-qrcode 14
npm install angularx-qrcode@14.0.0 --save
# Or with yarn
yarn add angularx-qrcode@14.0.0
Angular 13 and Ionic with angularx-qrcode 13
npm install angularx-qrcode@13.0.15 --save
# Or with yarn
yarn add angularx-qrcode@13.0.15
Angular 12 and Ionic
npm install angularx-qrcode@12.0.3 --save
# Or with yarn
yarn add angularx-qrcode@12.0.3
Angular 11 and Ionic
npm install angularx-qrcode@11.0.0 --save
# Or with yarn
yarn add angularx-qrcode@11.0.0
Older supported angular versions
# angular 10 and Ionic
npm install angularx-qrcode@10.0.12 --save
# angular 9 and Ionic
npm install angularx-qrcode@~2.3.7 --save
# angular 8 and Ionic
npm install angularx-qrcode@~2.1.4 --save
# angular 5/6/7
npm install angularx-qrcode@1.6.4 --save
# Angular 4
npm install angularx-qrcode@1.0.3 --save
// File: app.module.ts
// all your other imports...
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
// File: app.component.html
// all your HTML...
<qrcode [qrdata]="'Your data string'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>
The source for a live angularx-qrcode demo app and more examples how to implement angularx-qrcode is in the folder projects/demo-app in this repository.
Now that angular/Ionic know about the new QR Code module, let's invoke it from our template with a directive. 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.
| Attribute | Type | Default | Description |
|---|---|---|---|
| allowEmptyString | Boolean | false | Allow qrdata to be an empty string |
| alt | String | null | HTML alt attribute (supported by img, url) |
| ariaLabel | String | null | HTML aria-label attribute (supported by canvas, img, url) |
| colorDark | String | '#000000ff' | RGBA color, color of dark module (foreground) |
| colorLight | String | '#ffffffff' | RGBA color, color of light module (background) |
| cssClass | String | 'qrcode' | CSS Class |
| elementType | String | 'canvas' | 'canvas', 'svg', 'img', 'url' (alias for 'img') |
| errorCorrectionLevel | String | 'M' | QR Correction level ('L', 'M', 'Q', 'H') |
| imageSrc | String | null | Link to your image |
| imageHeight | Number | null | height of your image |
| imageWidth | Number | null | width of your image |
| margin | Number | 4 | Define how much wide the quiet zone should be. |
| qrCodeURL | EventEmitter<SafeUrl> | Returns the QR Code URL | |
| qrdata | String | '' | String to encode |
| scale | Number | 4 | Scale factor. A value of 1 means 1px per modules (black dots). |
| title | String | null | HTML title attribute (supported by canvas, img, url) |
| version | Number | (auto) | 1-40 |
| width | Number | 10 | Height/Width (any value) |
Depending on the amount of data of the qrdata to encode, a minimum width is required.
Working online demo of Angular QR Code Generator
The source for the angular app is available in projects/demo-app. Run the command
ng serve demo-app --open
and open the url http://localhost:4200/ in your browser
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.
MIT License
Copyright (c) 2018 - present Andreas Jacob (Cordobo.com)