# QR Code

> Renders a QR code on a canvas. Optional center icon overlay. Encoding is handled by [Project Nayuki's QR Code generator library](https://www.nayuki.io/page/qr-code-generator-library) (MIT) vendored inline — no runtime dependency.

Source: https://ngwr.dev/reference/components/qrcode  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrQr } from 'ngwr/qr';

@Component({ imports: [WrQr] })
export class MyComponent {}
```

## Basic usage

```html
<wr-qr value="https://ngwr.dev" />
```

## Sized, colored, high error correction

Use level='H' when you plan to overlay anything in the center.

```html
<wr-qr value="ngwr" [size]="240" level="H" color="#3969e2" />
```

## Center icon

`iconUrl` overlays an image in the middle; pair it with `level='H'` so the covered modules stay recoverable.

```html
<wr-qr value="https://ngwr.dev" [size]="180" level="H" iconUrl="/icon.svg" [iconSize]="40" />
```

## Interactive

```html
<wr-qr [value]="text()" [size]="200" />
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `value`required | Text or URL to encode. Required. | `string` | — |
| `level` | Error correction level. Use `'H'` if you overlay an icon. | `WrQrErrorLevel` | `'M'` |
| `size` | Side length of the rendered canvas, in pixels. | `number` | `160` |
| `padding` | Outer quiet-zone padding in pixels. | `number` | `10` |
| `color` | Module (dot) color. | `string` | `'#000000'` |
| `bgColor` | Background color of the canvas + host. | `string` | `'#ffffff'` |
| `iconUrl` | Optional image URL or data URL to overlay in the center. | `string \| null` | `null` |
| `iconSize` | Center icon size in logical pixels. | `number` | `42` |
| `ariaLabel` | Accessible name. A QR code is content — it usually encodes a URL — and a `<canvas>` carries no implicit role and no text alternative, so without a name it is nothing at all to a screen reader. Say what the code is FOR when you can. Falls back to `qr.label`. | `string \| null` | `null` |