ngx-angular-qrcode
v1.0.2
Published
This library allow you to create beautiful QR Codes in Angular application.
Downloads
189
Maintainers
Readme
ngx-angular-qrcode - Build beautiful QR Codes
This library provides an Angular component to create beautiful QR codes in your application.
Note that, this library supports Angular version 9 till version 15 onward, and verified with demos.
Need Dynamic QR Codes?
If you need to dynamic QR codes with analytics and more features, check out QRtrac
Demo
Create, and download beautiful QR Codes.
Example QR Codes
Credits
This is an Angular wrapper library over the plain JavaScript QR Code Styling library
Installation
Install the library by running
npm install ngx-angular-qrcode
command in your Angular project directory.Import
NgxAngularQrcodeModule
module intoAppModule
or any lazy loaded child module of your Angular application.
import { NgxAngularQrcodeModule } from 'ngx-angular-qrcode';
@NgModule({
declarations: [
AppComponent
],
imports: [
NgxAngularQrcodeModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Add
<qr-code></qr-code>
selector in your component's HTML file or template. The parameters can be configured per requirements.
<qr-code #qrCode
[qrData]="qrData"
[shape]="shape"
[width]="width"
[height]="height"
[margin]="margin"
[imageUrl]="imageUrl"
[dotsType]="dotsType"
[dotsColor]="dotsColor"
[dotsGradient]="dotsGradient"
[dotsStartColor]="dotsStartColor"
[dotsEndColor]="dotsEndColor"
[dotsGradientType]="dotsGradientType"
[dotsGradientRotation]="dotsGradientRotation"
[cornerSquareType]="cornerSquareType"
[cornerSquareColor]="cornerSquareColor"
[cornerSquareGradient]="cornerSquareGradient"
[cornerSquareStartColor]="cornerSquareStartColor"
[cornerSquareEndColor]="cornerSquareEndColor"
[cornerSquareGradientType]="cornerSquareGradientType"
[cornerSquareGradientRotation]="cornerSquareGradientRotation"
[cornerDotType]="cornerDotType"
[cornerDotColor]="cornerDotColor"
[cornerDotGradient]="cornerDotGradient"
[cornerDotStartColor]="cornerDotStartColor"
[cornerDotEndColor]="cornerDotEndColor"
[cornerDotGradientType]="cornerDotGradientType"
[cornerDotGradientRotation]="cornerDotGradientRotation"
[backgroundColor]="backgroundColor"
[backgroundGradient]="backgroundGradient"
[backgroundStartColor]="backgroundStartColor"
[backgroundEndColor]="backgroundEndColor"
[backgroundGradientType]="backgroundGradientType"
[backgroundGradientRotation]="cornerDotGradientRotation"
[imageSize]="imageSize"
[imageMargin]="imageMargin"
[hideImageBackgroundDots]="hideImageBackgroundDots"
[errorCorrectionLevel]="errorCorrectionLevel"></qr-code>
- Make sure you create a local reference using
#qrCode
or any variable name to calldownload
method to download qr code if its used in@ViewChild()
.
import { Component, ViewChild } from '@angular/core';
import { NgxAngularQrcodeComponent } from 'ngx-angular-qrcode';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
qrData = 'https://qrtrac.com';
shape = 'circle';
width = 300;
height = 300;
margin = 5;
imageUrl!: string;
// Dots Options
dotsType = 'Rounded';
dotsGradient = true;
dotsColor!: string;
dotsStartColor = '#11ff33';
dotsEndColor = '#ff1122';
dotsGradientType = 'linear';
dotsGradientRotation = 0;
// Corner Square Options
cornerSquareType = 'Rounded';
cornerSquareGradient = true;
cornerSquareColor!: string;
cornerSquareStartColor = '#ff12ff';
cornerSquareEndColor = '#E09515';
cornerSquareGradientType = 'linear';
cornerSquareGradientRotation = 0;
// Corner Dot Options
cornerDotType = 'Rounded';
cornerDotGradient = true;
cornerDotColor!: string;
cornerDotStartColor = '#ffff00';
cornerDotEndColor = '#333333';
cornerDotGradientType = 'radial';
cornerDotGradientRotation = 0;
// Background Options
backgroundType = 'Rounded';
backgroundGradient = false;
backgroundColor = '#ffffff'
backgroundStartColor = '#ffffff';
backgroundEndColor = '#B7C2E1';
backgroundGradientType = 'radial';
backgroundGradientRotation = 0;
// Image Options
imageSize!: number;
imageMargin!: number;
hideImageBackgroundDots = true;
errorCorrectionLevel = 'Q';
fileExtension = 'png';
@ViewChild(NgxAngularQrcodeComponent, { static: true }) qrCode!: NgxAngularQrcodeComponent;
qrImageChanged(event: any): void {
const files = event.target.files;
const fileToUpload = files.item(0);
let reader = new FileReader();
reader.onload = (event: any) => {
this.imageUrl = event.target.result;
}
reader.readAsDataURL(fileToUpload as Blob);
}
downloadQr(): void {
this.qrCode.download(this.fileExtension);
}
}
API Documentation
Please refer to this API Documentation to understand each parameters, and different options for them.