Angular

Implementation of the Qr grid library for Angular applications.

Installation

npm

npm install @qrgrid/angular

bun

bun add @qrgrid/angular

pnpm

pnpm install @qrgrid/angular

yarn

yarn add @qrgrid/angular

Using Canvas

import { CanvasQr } from "@qrgrid/angular";

<qr input="Hello World!"/>

Props and Events

Prop	Type	Description	Default
input	string	Data to encode
qrOptions?	QrOptions	Options for QR encoding
image?	QrImageOption	Image options for the image in QR code	sizePercent: 15, opacity: 1, overlap: true, border: false
size?	number	Canvas size	400
bgColor?	QrColor | ((ctx: CanvasRenderingContext2D) => QrColor)	Background color	black
color?	QrColor | ((ctx: CanvasRenderingContext2D) => QrColor)	QR code color	white
moduleStyle?	ModuleStyleFunction	Custom styles for QR modules

Events	Event Type	Description	Default
onQrDataEncoded?	(qr: QR) => void;	Emitted once sata is encoded
onQrRendered?	(ctx: CanvasRenderingContext2D, size: number, qr: QR) => void;	Emitted once QR code is generated

see in code.

Using Svg

import { SvgQr } from "@qrgrid/angular";

<qr input="Hello World!"/>

Props

Prop	Type	Description	Default
input	string	Data to encode
qrOptions?	QrOptions	Qr Options for QR encoding
image?	QrImageOption	Image options for image in the QR code	sizePercent: 15, opacity: 1, overlap: true, border: false
size?	number	SVG size	400
bgColor?	string	Background color	black
color?	string | { codeword?: string; finder?: string }	QR code color	white
moduleStyle?	ModuleStyleFunction	Custom styles for QR modules

Events	Event Type	Description	Default
onQrDataEncoded?	(qr: QR) => void;	Emitted once sata is encoded
onQrRendered?	(ctx: CanvasRenderingContext2D, size: number, qr: QR) => void;	Emitted once QR code is generated

see in code.

Examples

Explore Styles for custom styling and other utilities

• Basic

  <qr input="Hello World!" />

• ErrorCorrection

  <qr input="Hello World!" [qrOptions]="{errorCorrection: 'H'}" />

• Color

  <qr input="Hello World!" bgColor="#F8EDED" color="#173B45" />

• Module Style from @qrgrid/styles

  import { dotModuleStyle } from "@qrgrid/styles/canvas/styles";
  
  <qr input="Hello World!" [moduleStyle]={dotModuleStyle} />

  import { smoothModuleStyle } from "@qrgrid/styles/canvas/styles";
  
  <qr input="Hello World!" [moduleStyle]={smoothModuleStyle} />

• Images

  <qr input="Hello World!" [image]="{ src: ''./vite.svg' }" />

  <qr input="Hello World!" [image]="{ src: './vite.svg', overlap: false }" />

• Downloading using @qrgrid/styles

  Canvas

  import { CanvasQr } from "@qrgrid/angular";
  import { downloadQr } from "@qrgrid/styles/canvas/utils";
  
  // inside class component
  @ViewChild(CanvasQr) canvasQr!: CanvasQr;
  
  download() {
    if (this.canvasQr?.canvas?.nativeElement) {
      downloadQr(this.canvasQr.canvas.nativeElement);
    }
  }

  Svg

  import { SvgQr } from "@qrgrid/angular";
  import { downloadQr} from "@qrgrid/styles/svg/utils";
  
  // inside class component
  @ViewChild(SvgQr) svgQr!: SvgQr;
  
  download() {
    if (this.svgQr?.svg?.nativeElement) {
      downloadQr(this.svgQr.svg.nativeElement);
    }
  }

For more examples and customization options, see the examples.