Generate QR Code in Angular

in this article, we will learn how to generate QRCode in Angular for our application. For that first, let’s know about QRCode.
QRCode: QRCode stands for Quick Response code. Its a matrix type barcode (Two-dimensional Barcode). A QRCode is a machine-readable optical label that contains information about the item code. It contains alpha-numeric values.
All QR codes contain a square shape and include three square outlines in the bottom-left, top-left, and top-right corners. These square outlines define the orientation of the code.
Now let’s learn how to generate QRCode in Angular 10 with a simple example.
For that first, we need a library called “ngx-qrcode” We need to install library using below command.

npm install @techiediaries/ngx-qrcode

After installing module lets add a module in our app.module.ts file.

....
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
...
@NgModule({
imports:      [ ..., NgxQRCodeModule ],
....
})

After adding a module in the app.module file we can use it in our component to generate QRcode.
Let’s open app.component.ts file and add “import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from ‘@techiediaries/ngx-qrcode’;” then assign values to the variables to draw the QRCode.Below is the full code for app.component.ts & app.component.html.

import { Component, VERSION } from '@angular/core';
import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from '@techiediaries/ngx-qrcode';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  elementType = NgxQrcodeElementTypes.URL;
  correctionLevel = NgxQrcodeErrorCorrectionLevels.HIGH;
  value = 'https://www.techiediaries.com/';
}

<h2>{{name}} QRCode</h2>

<ngx-qrcode
  [elementType]="elementType"
  [errorCorrectionLevel]="correctionLevel"
  [value]="value"
  cssClass="boxshadow"></ngx-qrcode>

<textarea [(ngModel)] = "value"></textarea>