NgxQrcodeGenerator

A highly customizable, reactive Angular component for generating QR codes dynamically using the QRious library. Fully modernized to take advantage of Angular 22 standalone architecture, signal inputs, and property initializer injections.

Features

• ⚡ Angular 22 Native: Built on the absolute latest major framework version.
• 🚦 Signal-Based Inputs: Uses Angular's modern input() signals and reactive effect() triggers for automatic updates and improved change detection.
• 🏗️ Default Standalone: Designed as a standalone component, ready to be imported directly into other standalone components or classic NgModule architectures.
• 🎨 Rich Customization: Fully customize background, foreground, padding, size, opacity, and error correction levels.
• 🖨️ Dual Rendering Modes: Seamlessly render to either a native HTML <canvas> element or a standard <img> element.
• 🔌 Lightweight & Clean: Built using the preferred inject() function with clean lifecycle-free reactive triggers.

Installation

Install the library using npm:

npm install ngx-qrcode-generator

Usage

1. Import the Component

For Standalone Components (Angular 19+ Default)

Import NgxQrcodeGeneratorComponent directly into your component's imports array:

import { Component } from '@angular/core';
import { NgxQrcodeGeneratorComponent } from 'ngx-qrcode-generator';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgxQrcodeGeneratorComponent],
  templateUrl: './app.component.html'
})
export class AppComponent { }

For NgModule Compatibility (Traditional Apps)

If you are using modules, import it into your module's imports array:

import { NgModule } from '@angular/core';
import { NgxQrcodeGeneratorComponent } from 'ngx-qrcode-generator';

@NgModule({
  imports: [NgxQrcodeGeneratorComponent],
  // ...
})
export class YourModule { }

2. Add to Template

<ngx-qrcode-generator
  [value]="'https://github.com/mustafaer/ngx-qrcode-generator'"
  [size]="200"
  [foreground]="'#1e3a8a'"
  [background]="'#f8fafc'"
  [level]="'H'"
></ngx-qrcode-generator>

API Reference

Input Properties

| Property | Type | Default | Description | | :--- | :--- | :--- | :--- | | value | string | '' | The text, URL, or data to encode inside the QR code. | | size | number | 100 | The width and height of the QR code element in pixels. | | canvas | boolean | false | If true, renders as a <canvas> element. If false, renders as an <img> element. | | background | string | 'white' | Background color of the QR code. | | backgroundAlpha | number | 1.0 | Opacity of the background color (0.0 to 1.0). | | foreground | string | 'black' | Color of the QR code blocks (foreground). | | foregroundAlpha | number | 1.0 | Opacity of the foreground blocks (0.0 to 1.0). | | level | 'L' \| 'M' \| 'Q' \| 'H' | 'L' | Error correction level (L low, M medium, Q quartile, H high). | | mime | string | 'image/png' | The image MIME type (when rendering in image mode). | | padding | number \| null | null | The padding around the QR code in pixels. Use null for default padding. |

Styling & Performance

The component dynamically re-renders when any of its input signals change, ensuring optimal rendering cycles without polluting the global change detection run. The generated elements inherit direct style customizability from their surrounding layout.

License

This project is licensed under the MIT License - see the LICENSE file for details.