angularx-qrcode
is a Ionic 3 and Angular4+ QR Code component/module library to generate QR Codes (Quick Response) in your Ionic and Angular 4+ app with support for AOT. It is a drop-in replacement for the no-longer-maintained angular2 component ng2-qrcode
and based on qrcodejs.
For Angular 5+ Support install 1.1.1
For Angular 4 Support install 1.0.2
angularx-qrcode
supports AOT Compilation (Ahead-of-Time Compilation) which results in significant faster rendering. For further information see https://angular.io/guide/aot-compiler
npm install angularx-qrcode --save
yarn add angularx-qrcode
npm install [email protected] --save
yarn add [email protected]
// all your imports
import { QRCodeModule } from 'angularx-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Now that Angular/Ionic knows about our QR Code module, we can 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 QR code data string'" [size]="256" [level]="'M'"></qrcode>
In addition to our <qrcode>
-directive in example.html
,
we add two lines of code to our controller example.ts
.
// example.ts:
export class QRCodeComponent {
public angularxQrCode: string = '';
// assign a value anywhere in/below your constructor
this.myAngularxQrCode = 'Your QR code data string';
}
// example.html:
<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>
Attribute | Type | Default | Description |
---|---|---|---|
allowEmptyString | Boolean | false | Allow empty string |
colorlight | String | '#ffffff' | Dark color |
colordark | String | '#000000' | Light Color |
level | String | 'M' | QR Correction level ('L', 'M', 'Q', 'H') |
qrdata | String | '' | String to encode |
size | Number | 256 | Height / Width (any value) |
usesvg | Boolean | false | SVG Output |
Depending on the size (amount of data) of the qrdata to encode, a minimum size might be required.
MIT License
Based on no-longer-maintained angular2 component https://github.com/PragmaticClub/ng2-qrcode