How to Create/Generate QR Code in Angular 10

Last updated on by Digamber

This is a step by step Angular tutorial. In this tutorial, we learn how to generate or create a QR Code in the Angular 10/9/8 application taking the help of angular2-qrcode library.

The angular2-qrcode is a component that you can easily integrate into your project. It relies on qrious to generate QR Codes.

In modern applications, lots of works are done by scanning the QR Codes, be it making the payment, sharing the data, getting the product details, or retrieving the location.

You just need to take out the mobile from your pocket and keep infront of the scanner and the rest of the work your app automatically does. It’s not wrong to say QR codes have become the essential part of our lives.

When it comes to compatibility, so QR codes are supported by all the major platforms such as iOS, Android, and Windows.

A QR code (Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for Japan’s automotive industry. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application.
– Wikipedia

This article helps you create an Angular app from scratch and makes you understand how to implement QR codes in the Angular app. We will convert user-provided data into QR code. So stick with us till the end of this tutorial.

Create Angular Application

To work on the Angular QR Code application, you must have angular cli installed on your development machine.

npm install -g @angular/cli

Make sure which angular version you are working on.

ng --version

Creating a new angular application is super easy; all it needs a single line of command:

ng new angular-qr-code-app-example

Answer some CLI questions:

# ? Would you like to add Angular routing? Yes
# ? Which stylesheet format would you like to use? CSS

Move into the project root:

cd angular-qr-code-app-example

Install Angular 2 QR Code Module

Well, this tutorial is incomplete without installing the angular2-qrcode library. To install the angular2 qrcode package in angular, run the below command.

npm install angular2-qrcode

Import and Register QRCodeModule in App Module

In general, to generate the QR Codes using the angular2-qrcode module, we need to import and register QRCodeModule package in angular’s main app module file.

Also, we will be importing the FormsModule to interact with the HTMP Form input elements.

Add the code in app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { QRCodeModule } from 'angular2-qrcode';
import { FormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    QRCodeModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Implement QR Code Generator in Angular 10

All hail to angular2-qrcode component, you can very quickly implement QR Code Generator in angular by just adding the <qr-code> attribute.

<qr-code [value]="'www.positronx.io'"></qr-code>

Some QR Code Properties

The QR Code offers various properties that can be associated with <qr-code> directive.

value: The property type takes a String value and convert String to QR code; the default value is ”.

size: This property sets up the height and width of the QR code component, prop type is number, and the default value is set to 100.

level: Prop type is String; the default value is set to L mainly used for QR Correction level (‘L’, ‘M’, ‘Q’, ‘H’).

background: Prop type is String; the default value is white. Mainly used for setting up the background color.

backgroundAlpha: It is used to set the opacity of the background, defined in numerical form, and the default value is 1.0.

foreGround: Used for adjusting the foreground color, property type is String, and the default value is black.

foregroundAlpha: Sets up the opacity of the foreground. The default value is 1.0 and is defined in numerical form.

mime: The value type is String, used for setting up the mime type for the output image. Also, the default value is image/png.

padding: Mainly sets up the padding in QR Code; the number is the property type with the default value is set to null.

canvas: The value type is boolean and used for outputting a canvas element if sets to true. However, the default value is set to false.

Store JSON Data in QR Code

In this step, we will learn how to include JSON data in the QR Code component using the JSON.stringify() method and qr-code component.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  data = [{
    'name': 'John Doe',
    'profile': 'Software Developer',
    'email': 'john@doe.com',
    'hobby': 'coding'
  }]

  dataToString = JSON.stringify(this.data);

}

You can include the code in app.component.html file.

<qr-code [value]="dataToString" size="300"></qr-code>

Generate Dynamic QR-Code in Angular

Here is the quick version integrated with QR codes properties to dynamically update the QR Code component values in Angular.

Place the following code in app.component.html file.

<h2>Dynamically Update QR Code Values</h2>

<div>QR Code: {{ qrCodeVal }}</div>
<div>Level: {{ level }}</div>
<div>Width: {{ width }}</div>

<br />
<br />

<div>
  <qr-code [value]="qrCodeVal" [size]="width" [level]="level"></qr-code>
</div>

<h4>Change QR Code Info</h4>
<label>
  Update name string: <input [(ngModel)]="qrCodeVal" placeholder="name" />
</label>
<br />
<br />

<button (click)="updateQrInfo('John Doe')">Update to "John Doe"</button>
<button (click)="updateQrInfo('Ryan Duff')">Update to "Ryan Duff"</button>
<button (click)="updateQrInfo('Jerry Maguire')"> update to "Jerry Maguire"</button>

<br />
<br />
<strong>Update Width</strong>: 
<button (click)="updateWidth(500)">500</button>
<button (click)="updateWidth(400)">400</button>
<button (click)="updateWidth(300)">300</button>
<button (click)="updateWidth(200)">200</button>

<br />
<br />
<strong>Update Level</strong>: 
<button (click)="updateLevel('L')">L</button>
<button (click)="updateLevel('M')">M</button>
<button (click)="updateLevel('Q')">Q</button>
<button (click)="updateLevel('H')">H</button>

Incorporate the given below code in app.component.html file.

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  public qrCodeVal: string = null;
  public level: "L" | "M" | "Q" | "H";
  public width: number;

  constructor() {
    this.level = "L";
    this.qrCodeVal = "QR code string value";
    this.width = 200;
  }

  updateLevel(newValue: "L" | "M" | "Q" | "H") {
    this.level = newValue;
  }

  updateQrInfo(newValue: string) {
    this.qrCodeVal = newValue;
  }

  updateWidth(newValue: number) {
    this.width = newValue;
  }
}

Next, start the following command to test the application:

ng serve --open

Eventually, we have completed the Angular 10/9/8/7 QR Code generator tutorial with example i hope you would love this tutorial. Also, you can download the complete code of this tutorial from GitHub.