Installation
import { WrQr } from 'ngwr/qr';
@Component({ imports: [WrQr] })
export class MyComponent {}Basic usage
<wr-qr value="https://ngwr.dev" />Sized, colored, high error correction
Use level='H' when you plan to overlay anything in the center.
<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.
<wr-qr value="https://ngwr.dev" [size]="180" level="H" iconUrl="/icon.svg" [iconSize]="40" />Interactive
<wr-qr [value]="text()" [size]="200" />API
| Name | Description | Type | Default |
|---|---|---|---|
valuerequired | 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 |