QR Code Generator for Angular 13

An Angular Component library for creating QR (Quick Response) Codes is @techiediaries/ngx-qrcode.

Add npm install @techiediaries/ngx-qrcode
npm install @techiediaries/ngx-qrcode --save

Add the @techiediaries/ngx-qrcode NgxQRCodeModule to your app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { FormsModule } from '@angular/forms';

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

You may use the ngx-qrcode component in your Angular application after importing the library.

Add these to app.component.html:

<div>
  <h1>
    Angular 13 QR Code Generator
  </h1>
  <ngx-qrcode
    [value]="value"
    alt="Demo QR Code"
    cssClass="box-shadow">
  </ngx-qrcode>
  <textarea [(ngModel)] = "value"></textarea>
</div>

Add this to app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngx-qrcode';
  name = 'Angular ';
  value = 'Prinkesha Lathidadiya';
}

Let’s now run the project with the following command.

ng serve -o

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe

Select Categories