Package Exports

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.

Need Dynamic QR Codes?

If you need to dynamic QR codes with analytics and more features, check out QRtrac

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 {

  @ViewChild(NgxAngularQrcodeComponent, { static: true }) qrCode!: NgxAngularQrcodeComponent;

// Using local reference
//   @ViewChild('qrCode', { static: true }) qrCode!: NgxAngularQrcodeComponent;

  downloadQr(): void {
    this.qrCode.download('png');
  }
}