# angularx-qrcode - Angular QR Code Generator `angularx-qrcode` - a fast and easy-to-use Ivy compatible Ionic and Angular QR Code Generator library - [Features](#features) - [Installation](#installation) - [Usage](#usage) - [Example Implementations](#examples) - [Available Parameters](#available-parameters) - [Demo](#demo) - [Contribute](#contribute) - [License](#license) ## Features - 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. ## Installation **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 ``` # Usage ### Import the module and add it to your imports section in your main AppModule: ``` // 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... ``` ## Examples The source for **[a live angularx-qrcode demo app](https://cordobo.github.io/angularx-qrcode/)** and more examples how to implement angularx-qrcode is in the folder [`projects/demo-app`](projects/demo-app/src/app) in this repository. ### Generate a QR Code from a string (directive only) 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. ``` ``` ### Create a QR Code from a variable in your controller In addition to our ``-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 ``` ### Download a QR Code The [online demo](https://cordobo.github.io/angularx-qrcode/) contains a [`working sample`](projects/demo-app) how to download the QR Code with a button. ### Getting the QR Code URL To download the QR Code, we have to use the `qrCodeURL` attribute of the `` 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 Download ``` The file format obtained by `qrCodeURL` depends directly on the elementType of ``. If it's either canvas, url or image, it returns an image as `.png`, if it's svg, returns a `.svg` file. ## Available Parameters | 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\ | | 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) | ## QR Code capacity Depending on the amount of data of the **qrdata** to encode, a minimum **width** is required. # Demo **[Working online demo of Angular QR Code Generator](https://cordobo.github.io/angularx-qrcode/)** The source for the angular app is available in [`projects/demo-app`](projects/demo-app). Run the command ``` ng serve demo-app --open ``` and open the url `http://localhost:4200/` in your browser ## AOT - Ahead Of Time Compilation `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 ## SSR - Server Side Rendering As of version 1.6.0, SSR support is fully implemented, the following workaround is no longer needed. [HowTo use Angular QRCode with SSR](https://github.com/Cordobo/angularx-qrcode/issues/5) ## Contribute - Please open your PR against the development branch. - Make sure your editor uses **prettier** to minimize commited code changes. ## License MIT License Copyright (c) 2018 - present [Andreas Jacob (Cordobo.com)](http://cordobo.com/)