Angular 18 Create QR Code using ng-qrcode

Manoj Kalla
Jul 31
2.8k
0
4

100

Article

In this article, you will learn the following things.

How to Create a QR Code?
ng-qrcode

Nowadays everyone knows about QR codes. We are using QR codes in various places.

For Payment: Gpay, PhonePe, IndianPost Pay App
For Information: Hotel Menu on QR Code, Get any info on the scan.
For Social App: Scan for Facebook and Instagram.

QR Code full form is a Quick Response (QR) code. In this session, we will learn how to create a QR code in angular.

How QR Code Implemented?

Create Angular project - AnguDemo.
Run the application and check project was created successfully.
Install NPM package called ng-qrcode by command

Command

npm install ng-qrcode

First, implement UI/Frontend side coding.
Understand the UI

We want to create a form on form there is following form controls.

msg – TextBox (Input – Type Text) html control.
qr-code Component of nx-qrcode library.

How QR Code get generated?

In the QR-code component pass data(values) to the value attribute. In this walkthrough, we are passing the msg variable. As you type/store the values in the msg variable your QR Code will get generated.

Step-by-step Implementation

Create an Angular project called “AnguDemo”.

command

ng new AnguDemo

Create a Component Called the qrcode

command

ng g c qrcode

Open the app.component.html file.

<ul>
  <li><a routerLink="/qrcode">QR Code</a></li>
</ul>
<router-outlet />

Open app.component.ts file.

import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, RouterLink],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular Demo';
}

We are going to use the ng-code package.

command

npm install --save ng-qrcode

Install ng-qrcode

Open the qrcode.component.html file.

<form #qrform="ngForm" (ngSubmit)="submitForm(qrform.value)">
    Message for QR Code
    <input type="text" name="msg" [(ngModel)]="msg">
</form>
<h3>QR Code Image</h3>
<!-- QR Code Generated Image with two-way binding -->
<!-- The QR Code updates based on the input value in the text box -->
<qr-code value="{{msg}}" size="300" errorCorrectionLevel="M"></qr-code>
<br>
<ul>
    <li style="margin-bottom:20px;">
        At runtime, you can assign a value to the MSG variable. The system will generate the QR Code
        based on the MSG variable data/value.
    </li>
    <li style="margin-bottom:20px;">
        Two-way binding is used to generate the QR Code image.
    </li>
    <li style="margin-bottom:20px;">
        The QR Code updates dynamically based on the text box input.
    </li>
</ul>

Open the qrcode.component.ts file.

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { QrCodeModule } from 'ng-qrcode';
@Component({
  selector: 'app-qrcode',
  standalone: true,
  imports: [CommonModule, QrCodeModule, FormsModule],
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.css']
})
export class QrcodeComponent {
  msg!: string;

  submitForm(form: any) {
    console.log(form);
  }
}