# @qrcodesdk/angular

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

## Install

<PackageManagerTabs
  packages={['@qrcodesdk/angular', '@qrcodesdk/core', '@qrcodesdk/browser']}
  mode="add"
/>

## Quick start

Import the components directly where you need them:

```ts
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

<PackageComponents selector={true} />

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

<QRCodeSVG />

### Image component

<QRCodeImage />

### Canvas component

<QRCodeCanvas />

### PNG download

<QRCodeDownloadImage />

## 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](/guides/center-images/#angular) 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.

```angular-html
<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](/guides/download-or-save/#download-from-angular) 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](/reference/builder/) for encoding, version, mask, and error correction;
[Customize output](/guides/customize/) for shared visual options; and the dedicated
[renderer references](/reference/renderers/) for output-specific options and constraints.

## Public API

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