NgQrCodeGen ⚡

NgQrCodeGen is an Angular library for generating QR codes from any string, URL, or data. It provides a customizable QR code component that can be easily integrated into your Angular applications. This library is lightweight, easy to use, and supports various customization options to fit your design needs.

Features

• ✅ Simple and easy-to-use Angular component
• 🎨 Fully customizable (size, colors, margin, etc.)
• 📱 Responsive design, works on all screen sizes
• ⚡ Lightweight with no unnecessary dependencies
• 🔧 Suitable for encoding URLs, text, and other data formats

Installation

To install the package, run:

npm install ng-qrcode-gen

Usage

Import the Module

In your app.module.ts, import the NgQrCodeGenComponent and add it to the imports array:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgQrCodeGenComponent } from 'ng-qrcode-gen';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, NgQrCodeGenComponent],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Implement in HTML

Use the <ng-qrcode-gen> component in your HTML template:

<ng-qrcode-gen
  [margin]="10"
  [width]="400"
  src="https://rushighuge.in"
  background="#1f1f1f"
  color="#0078d4"
></ng-qrcode-gen>

Example Component

In your app.component.ts, define the Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'Angular QR Code Generator';
}

Customization Options

The ng-qrcode-gen component supports the following customizable properties:

| Property | Type | Default | Description | |-------------|--------|---------|-------------| | [margin] | number | 4 | Space around the QR code | | [width] | number | 200 | Width of the QR code in pixels | | src | string | '' | The data to be encoded in the QR code | | background| string | #ffffff | Background color of the QR code | | color | string | #000000 | Color of the QR code pattern |

Demo Screenshot

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using Angular CLI, visit the Angular CLI Overview and Command Reference page.

Keywords

angular, qr code, angular qr code, qr code generator, ng-qrcode-gen, angular component, angular library, QR code scanner, QR code customization, responsive QR code, lightweight QR code library