Package Exports

ngx-angular-qrcode
ngx-angular-qrcode/bundles/ngx-angular-qrcode.umd.js
ngx-angular-qrcode/fesm5/ngx-angular-qrcode.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ngx-angular-qrcode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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 into AppModule 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 call download 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.