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