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: [
    QRCodeModule
  ]
...

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

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

@Component({
  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">
  <label>
    Write here to generate Code: <input [(ngModel)]="qrText" placeholder="Enter Your Name!!">
  </label>
</div>

Step7: Now, Run the Project

npm start

Output Look like this:

https://dl.dropboxusercontent.com/s/dnglzlv5zjjva32/video_24-07-2021_01.mp4?dl=0