Skip to content
QRCodeSDK

@qrcodesdk/angular

@qrcodesdk/angular provides standalone Angular components for rendering QR codes as SVG, PNG-backed image elements, and canvas elements.

Use it when an Angular template should own the QR code output while QRCodeSDK still handles matrix generation, styling, and browser downloads.

Install

Section titled “Install”
Terminal window
pnpm add @qrcodesdk/angular @qrcodesdk/core @qrcodesdk/browser

Components

Section titled “Components”
Component Selector Output Download support
SVGQRCode svg-qrcode Inline SVG element SVG
ImageQRCode image-qrcode PNG-backed <img> PNG
CanvasQRCode canvas-qrcode <canvas> element None

All components accept:

Input Type Description
data string Required QR code payload.
options object Matrix and renderer options.

options supports shared matrix options such as version, mode, errorCorrectionLevel, and mask. Renderer options match the corresponding QRCodeSDK renderer:

  • SVGQRCode uses QRCodeSVGOptions.
  • ImageQRCode uses QRCodeImageOptions.
  • CanvasQRCode uses QRCodeCanvasOptions.

Live examples

Section titled “Live examples”

SVG component

Section titled “SVG component”
import {Component} from '@angular/core';

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

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

Image component

Section titled “Image component”
import {Component} from '@angular/core';

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

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

Canvas component

Section titled “Canvas component”
import {Component} from '@angular/core';

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

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

PNG download

Section titled “PNG download”
import {Component, viewChild} from '@angular/core';

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

@Component({
  selector: 'AngularImageQRCodeDownloadExample',
  imports: [ImageQRCode],
  template: `
    <div class="flex flex-col items-center">
      <image-qrcode
        #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 DownloadImageQrcodeExample {
  private readonly qrCode = viewChild.required(ImageQRCode);

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

Download files

Section titled “Download files”

SVGQRCode exposes download(filename?) and writes an SVG file. ImageQRCode exposes download(filename?) and writes a PNG file.

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

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

Section titled “Related pages”