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';
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';

  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 = '';

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


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

In these eample we used 4 prperties of the “ngx-qrcode” called 1) elementType 2) errorCorrectionLevel 3) value 4) cssClass. For more potions and property from their official ngx-qrcode docs.
Below is the full embeded code for the QRCode you can easily used in your application.

Spread the love
  • 11
  • 2

No Responses

  1. Pingback: Generate QR Code in Angular > Seekalgo August 16, 2020