@qrcodesdk/angular

Angular components for rendering QR codes as inline SVG, PNG-backed Image elements, and Canvas elements.

Install

Package manager

npmpnpmvpdenobunyarn

npm install @qrcodesdk/angular

Quick start

Import the components directly where you need them:

import {Component} from '@angular/core';

import {QRCodeCanvas, QRCodeImage, QRCodeSVG} from '@qrcodesdk/angular';

@Component({
  selector: 'app-root',
  imports: [QRCodeSVG, QRCodeImage, QRCodeCanvas],
  template: `
    <qrcode-svg payload="https://qrcodesdk.dev" />
    <qrcode-image payload="https://qrcodesdk.dev" />
    <qrcode-canvas payload="https://qrcodesdk.dev" />
  `,
})
export class App {}

Version compatibility

@qrcodesdk/angular	Angular
0.x.x	^20.0.0 ^21.0.0 ^22.0.0

Components

Component	Selector	Output	Download support
QRCodeSVG	qrcode-svg	Inline SVG element	SVG
QRCodeImage	qrcode-image	PNG-backed <img>	PNG
QRCodeCanvas	qrcode-canvas	<canvas> element	None

Options

Prop	Type	Description
payload	string | number	Required QR code payload.
options	Component-specific options	Optional matrix and renderer options.

All three components are standalone. Add the components you use to the host component’s imports array, then bind payload and options with normal Angular template syntax.

Live examples

SVG component

import {Component} from '@angular/core';

import {QRCodeSVG} from '@qrcodesdk/angular';

@Component({
  selector: 'qrcode-angular-svg-example',
  imports: [QRCodeSVG],
  template: `
    <qrcode-svg
      [options]="{
        accessibility: {
          title: 'QR code for qrcodesdk.dev',
          ariaLabel: 'Scan to open qrcodesdk.dev',
        },
      }"
      payload="https://qrcodesdk.dev" />
  `,
})
export class QRCodeSVGExample {}

Image component

import {Component} from '@angular/core';

import {QRCodeImage, type QRCodeImageOptions} from '@qrcodesdk/angular';

@Component({
  selector: 'qrcode-angular-image-example',
  imports: [QRCodeImage],
  template: `
    <qrcode-image [options]="options" payload="https://qrcodesdk.dev" />
  `,
})
export class QRCodeImageExample {
  protected readonly options: QRCodeImageOptions = {
    style: {moduleSize: 8, quietZone: 4},
    accessibility: {
      alt: 'QR code for qrcodesdk.dev',
      ariaLabel: 'Scan to open qrcodesdk.dev',
    },
  };
}

Canvas component

import {Component} from '@angular/core';

import {QRCodeCanvas, type QRCodeCanvasOptions} from '@qrcodesdk/angular';

@Component({
  selector: 'qrcode-angular-canvas-example',
  imports: [QRCodeCanvas],
  template: `
    <qrcode-canvas [options]="options" payload="https://qrcodesdk.dev" />
  `,
})
export class QRCodeCanvasExample {
  protected readonly options: QRCodeCanvasOptions = {
    style: {
      moduleSize: 8,
      quietZone: 4,
      foreground: '#111827',
      background: '#ffffff',
    },
  };
}

PNG download

Download PNG

import {Component, viewChild} from '@angular/core';

import {QRCodeImage} from '@qrcodesdk/angular';

@Component({
  selector: 'qrcode-angular-download-image-example',
  imports: [QRCodeImage],
  template: `
    <div class="flex flex-col items-center gap-2">
      <qrcode-image
        #qrcode
        [options]="{
          accessibility: {alt: 'QR code for qrcodesdk.dev'},
        }"
        payload="https://qrcodesdk.dev" />
      <button class="btn-primary" (click)="qrcode.download('qrcodesdk')" type="button">
        Download PNG
      </button>
    </div>
  `,
})
export class QRCodeDownloadImageExample {
  private readonly qrCode = viewChild.required(QRCodeImage);

  protected download() {
    this.qrCode().download('qrcode.png');
  }
}

Center images

Load and decode a browser image first, store the resulting HTMLImageElement in a signal, and instantiate the component inside an @if block once the signal has a value. See Add a center image for the complete component and template.

Download files

• QRCodeSVG exposes download(filename?) and writes an SVG file.
• QRCodeImage exposes download(filename?) and writes a PNG file.

<qrcode-svg #qrcodeSvg payload="https://qrcodesdk.dev" />
<button (click)="qrcodeSvg.download('qrcodesdk')" type="button">Download SVG</button>

<qrcode-image #qrcodeImage payload="https://qrcodesdk.dev" />
<button (click)="qrcodeImage.download('qrcodesdk')" type="button">Download PNG</button>

The appropriate .svg or .png extension is appended when necessary.

QRCodeCanvas does not include a download method. Use QRCodeImage when you want built-in PNG download support.

See Download or save for template-reference downloads and manual Canvas export.

Server-side rendering

QRCodeSVG produces runtime-neutral SVG and can render on the server.

QRCodeImage and QRCodeCanvas rely on browser DOM and Canvas APIs, so they skip element creation and downloads outside the browser and populate their host after hydration.

Shared options

The options input combines matrix options with the selected renderer’s options. Use the builder reference for encoding, version, mask, and error correction; Customize output for shared visual options; and the dedicated renderer references for output-specific options and constraints.

Public API

import {
  QRCodeCanvas,
  type QRCodeCanvasOptions,
  QRCodeImage,
  type QRCodeImageOptions,
  QRCodeSVG,
  type QRCodeSVGOptions,
} from '@qrcodesdk/angular';