import { Component } from '@angular/core';
import { WrQr } from 'ngwr/qr';
@Component({ imports: [WrQr] })
export class MyComponent {}QR Code
Draws a QR code on a canvas, encoded by Project Nayuki's library (MIT).
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Basic usage
<wr-qr value="https://ngwr.dev" />Sized, colored, high error correction
size, color and bgColor style it; use level='H' when anything covers the centre.
<wr-qr value="ngwr" [size]="180" level="H" color="#3969e2" />
<wr-qr value="ngwr" [size]="180" level="H" color="#0f172a" bgColor="#f1f5f9" />Center icon
iconUrl puts an image in the middle; pair it with level='H'.
<wr-qr value="https://ngwr.dev" [size]="180" level="H" iconUrl="/icon.svg" [iconSize]="40" />Interactive
<wr-qr [value]="text()" [size]="180" />
<input wrInput [(ngModel)]="text" placeholder="Type to encode" />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 BITMAP units — not the CSS pixels size is in. The canvas is drawn at ten bitmap units per QR module and then scaled to size, so the default 10 is exactly one module, and what it comes to on screen shrinks as the payload grows and the code gains modules. iconSize is the other way round, in CSS pixels, and is scaled into the bitmap on the way in. The QR spec asks for a four-module quiet zone, i.e. 40. One module is enough for a phone decoder reading a screen, where the page around the canvas extends the margin anyway; raise it for a code that will be printed small or sit on a busy background. | number | 10 |
color | Module (dot) color. Any CSS colour, var() and light-dark() included: it is resolved against the canvas when the code is drawn, and redrawn only when an input changes, so a colour scheme switched afterwards is not followed. Keep the modules much darker than the background, or phones will not read the code. | string | '#000000' |
bgColor | Background color of the canvas + host. Any CSS colour, resolved the way color is. | 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 |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/qr's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-qr-radius | var(--wr-border-radius-base) | .wr-qr |