@qrcodesdk/angular

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

Install

npm

npm install @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

pnpm

pnpm add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

vp

vp add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

deno

deno add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

bun

bun add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

yarn

yarn add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

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 data="https://qrcodesdk.dev" />
    <qrcode-image data="https://qrcodesdk.dev" />
    <qrcode-canvas data="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
data	string | number	Required QR code payload.
options	Component-specific options	Optional matrix and renderer configuration.

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

Live examples

SVG component

Code

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

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

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

Preview

Image component

Code

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

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

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

Preview

Canvas component

Code

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

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

@Component({
  selector: 'qrcode-angular-canvas-example',
  imports: [QRCodeCanvas],
  template: `
    <qrcode-canvas [options]="options" data="https://qrcodesdk.dev" />
  `,
})
export class QRCodeCanvasExample {
  protected readonly options: QRCodeCanvasOptions = {
    size: 8,
    margin: 4,
    colors: {
      colorDark: '#111827',
      colorLight: '#ffffff',
    },
  };
}

Preview

PNG download

Code

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">
      <qrcode-image
        #qrcode
        [options]="{
          alt: 'QR code for qrcodesdk.dev',
        }"
        data="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');
  }
}

Preview

Download 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 data="https://qrcodesdk.dev" />
<button (click)="qrcodeSvg.download('qrcodesdk')" type="button">Download SVG</button>

<qrcode-image #qrcodeImage data="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 configuration

The options input combines matrix settings with the selected renderer’s settings. 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, QRCodeImage, QRCodeSVG} from '@qrcodesdk/angular';
import type {QRCodeCanvasOptions, QRCodeImageOptions} from '@qrcodesdk/browser';
import type {QRCodeSVGOptions} from '@qrcodesdk/core';