Angular QR Code Generator
Easy to use Ivy compatible QR code generator for Angular projects.
Features:
- Compatible with Angular 12
- Leverages the widely used qrcode
package to do the heavy lifting
- Renders to HTML Canvas
Change Log
Installation
Add as a dependency to your angular application:
npm install ng-qrcode --save
Usage
Import into your consuming module (Eg: AppModule):
import { QrCodeModule } from 'ng-qrcode';
@NgModule({
imports: [
QrCodeModule
]
})
Component
<qr-code value="Yo world!" size="300" errorCorrectionLevel="M"></qr-code>
value: string (required)
The value to encode in the QR code, eg: a url
size: string | number (optional)
An optional size in pixels to render at
Default: automatic size based on the value provided (recommended)
errorCorrectionLevel: string (optional)
Controls the amount of redundant information included to make the QR code
more likely to scan correctly if it is dirty / damaged
Default: "M"
Valid values: "L", "M", "Q", "H" - where "L" is the lowest
amount of redundancy, and "H" is the highest
See: https://www.npmjs.com/package/qrcode#error-correction-level for further details
centerImageSrc: string (optional)
A URI suitable to use an a Image src
property to load and render in the center of the QR code.
Note: the image will obscure part of the QR code, and therefore you should err on
the side of a higher error correction level, anecdotally when the size is less than 1/4
of the size of the code, with at least "M" error correction, it is generally still scannable.
centerImageSize: string | number (optional)
An optional size in pixels to render the center image.
Default: 60
Directive
If the provided component is not flexible enough for you, there is also a directive
provided that is used by the component under the hood, which provides finer
grain control.
Demo
See running demo here
A demo app is included in the repository under projects/ng-qrcode-demo
which can be
run locally using ng build && ng serve
Known/Common Issues
Reference Error 'global' is not defined
Essentially in some cases Angular will bundle a version of the buffer library that is not
compatible with web browsers if the 'global' object is not defined.
This can be easily worked around, see comment here for options:
https://github.com/mnahkies/ng-qrcode/issues/2#issuecomment-563414305
Pre-version 2.0.0 this package was developed by emin93 and used the qrious
npm package to generate the QR Codes.
The source for this was lost, and this repository is a re-write, first released
as v2.0.0 that uses the qrcode
npm package to generate QR Codes.
v2.0.0 should be backwards compatible, aside from a rename of the exported NgModule from
QRCodeModule -> QrCodeModule for consistency.