@qrcodesdk/angular

Documentation | Live Demo

Angular components for rendering QR codes as inline SVG, PNG, WebP, GIF, and JPEG Image elements, and Canvas elements.

Install

npm install @qrcodesdk/angular

pnpm add @qrcodesdk/angular

vp

vp add @qrcodesdk/angular

deno

deno add @qrcodesdk/angular

bun

bun add @qrcodesdk/angular

yarn

yarn add @qrcodesdk/angular

Quick start

Import the components directly where you need them:

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

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

@Component({
  selector: 'app-root',
  imports: [QRCodeSVG, QRCodePNG, QRCodeCanvas],
  template: `
    <qrcode-svg payload="https://qrcodesdk.dev" />
    <qrcode-png 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 | | QRCodePNG | qrcode-png | PNG-backed <img> | PNG | | QRCodeWebP | qrcode-webp | WebP-backed <img> | WebP | | QRCodeGIF | qrcode-gif | GIF-backed <img> | GIF | | QRCodeJPEG | qrcode-jpeg | JPEG-backed <img> | JPEG | | 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 configuration. |

Each image format has its own component, so your bundle only includes the encoders of the components you import. QRCodePNG uses the browser's native PNG encoder. QRCodeWebP renders lossless WebP, usually the smallest file, with an encoder bundled in the SDK that also works in Safari. QRCodeGIF is limited to 256 colors and binary transparency, so prefer PNG or WebP for transparent backgrounds and photographic center images. QRCodeJPEG is lossy and has no transparency: it blends transparent pixels onto a white matte by default, and quality (1 to 100, default 92) trades file size for detail. Use it when a destination requires JPEG. See the Image element renderers reference for details.

All 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 {}

PNG component

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

import {QRCodePNG, type QRCodePNGImageOptions} from '@qrcodesdk/angular';

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

WebP component

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

import {QRCodeWebP, type QRCodeWebPImageOptions} from '@qrcodesdk/angular';

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

GIF component

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

import {QRCodeGIF, type QRCodeGIFImageOptions} from '@qrcodesdk/angular';

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

JPEG component

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

import {QRCodeJPEG, type QRCodeJPEGImageOptions} from '@qrcodesdk/angular';

@Component({
  selector: 'qrcode-angular-jpeg-example',
  imports: [QRCodeJPEG],
  template: `
    <qrcode-jpeg [options]="options" payload="https://qrcodesdk.dev" />
  `,
})
export class QRCodeJPEGExample {
  protected readonly options: QRCodeJPEGImageOptions = {
    style: {moduleSize: 8, quietZone: 4},
    quality: 90,
    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

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

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

@Component({
  selector: 'qrcode-angular-download-png-example',
  imports: [QRCodePNG],
  template: `
    <div class="flex flex-col items-center gap-2">
      <qrcode-png
        #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 QRCodeDownloadPNGExample {
  private readonly qrCode = viewChild.required(QRCodePNG);

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

Center images

Load and decode a browser image first, then store options with centerImage: canvasCenterImage(image) in a signal. Instantiate the component inside an @if block once the signal has a value. QRCodeSVG takes svgCenterImage() with an embedded data URL instead. See Add a center image for the complete component and template.

Download files

QRCodeSVG, QRCodePNG, QRCodeWebP, QRCodeGIF, and QRCodeJPEG expose download(filename?) for SVG, PNG, WebP, GIF, and JPEG files respectively. The method appends the matching file extension when needed. QRCodeCanvas has no download method.

See Download or save for the complete Angular example, or its Canvas export section for manual downloads.

Server-side rendering

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

QRCodePNG, QRCodeWebP, QRCodeGIF, QRCodeJPEG, 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 groups encoding settings under matrix. Renderer settings such as style, accessibility, and centerImage go alongside it:

import {type QRCodeSVGOptions, circle, finder, rounded} from '@qrcodesdk/angular';

const options: QRCodeSVGOptions = {
  matrix: {errorCorrectionLevel: 'H'},
  style: {moduleSize: 8, quietZone: 4, modules: rounded(), finder: finder({center: circle()})},
  accessibility: {ariaLabel: 'Scan to open qrcodesdk.dev'},
};

Pass this object through the component's options input. Use QRCodePNGImageOptions, QRCodeWebPImageOptions, QRCodeGIFImageOptions, QRCodeJPEGImageOptions, or QRCodeCanvasOptions for the corresponding component. QRCodeGIFImageOptions also accepts transparency.threshold, and QRCodeJPEGImageOptions accepts quality and transparency.matte.

Import shape and pattern factories, and center-image factories from @qrcodesdk/angular alongside the components.

See Builder and matrix for the fields inside matrix, Customize appearance for style, and Renderer outputs for output-specific options.

Public API

import {
  type QRCodeAlignmentCenterShape,
  type QRCodeAlignmentOptions,
  type QRCodeAlignmentRingShape,
  type QRCodeAlignmentStyle,
  QRCodeCanvas,
  type QRCodeCanvasAccessibilityOptions,
  type QRCodeCanvasCenterImage,
  type QRCodeCanvasOptions,
  type QRCodeCenterImageLayout,
  type QRCodeCircleShapeOptions,
  type QRCodeColor,
  type QRCodeDataImageURL,
  type QRCodeDownloadHandle,
  type QRCodeErrorCorrectionLevel,
  type QRCodeFinderCenterShape,
  type QRCodeFinderOptions,
  type QRCodeFinderRingShape,
  type QRCodeFinderStyle,
  QRCodeGIF,
  type QRCodeGIFImageOptions,
  type QRCodeImageAccessibilityOptions,
  QRCodeJPEG,
  type QRCodeJPEGImageOptions,
  type QRCodeMask,
  type QRCodeMatrixOptions,
  type QRCodeMode,
  type QRCodeModulePattern,
  type QRCodeModuleShape,
  QRCodePNG,
  type QRCodePNGImageOptions,
  type QRCodePayload,
  type QRCodeRoundedShapeOptions,
  QRCodeSVG,
  type QRCodeSVGAccessibilityOptions,
  type QRCodeSVGCenterImage,
  type QRCodeSVGOptions,
  type QRCodeShape,
  type QRCodeShapePath,
  type QRCodeShapePiece,
  type QRCodeVersion,
  type QRCodeVisualStyle,
  QRCodeWebP,
  type QRCodeWebPImageOptions,
  alignment,
  canvasCenterImage,
  circle,
  customShape,
  diagonal,
  finder,
  rounded,
  svgCenterImage,
} from '@qrcodesdk/angular';

Documentation

• @qrcodesdk/angular
• Customize appearance
• Add a center image
• Download or save a QR code as SVG, PNG, WebP, GIF, or JPEG
• SVG string renderer
• Image element renderers
• Canvas element renderer