Generate QR Code In Angular

In this blog, we are going to see, how to generate a QR code for a particular item name or username.

Step1: Create a new Project

ng new angular-qrCode

Step2: Now, install node_modules

npm install

Step3: Now, install below npm package

npm install angularx-qrcode --save

Step4: Import this Package into the app.module.ts file

import { QRCodeModule } from 'angularx-qrcode';


imports: [

Step5: Write the below code into the app.component.ts

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  qrText: string="";

  constructor() {
    this.qrText = '';

  generateQrCode(txtValue: string): void {
    this.qrText = txtValue;

Step6: Write the below code into the app.component.html

<qrcode [qrdata]="qrText" [level]="'M'"></qrcode>
<div class="text">
    Write here to generate Code: <input [(ngModel)]="qrText" placeholder="Enter Your Name!!">

Step7: Now, Run the Project

npm start

Output Look like this:



Submit a Comment

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


Select Categories