Generate QR code using AngularJS

In this article, we will see how to generate and display QR codes in our Angular apps. A QR code is a matrix of black and white squares that can be read by a camera or a smartphone. A QR code can store information and URLs that make it easy to read for a bot or smartphone user. In a business scenario, QR codes can be used to share contact information, send emails, download apps, share URLs and location. Hence, we need to know how to generate one for our apps to keep up with the market.

Prerequisites: NPM must be installed

Environment Setup:

Install angular CLI and create a new angular project.

npm i -g @angular/cli
ng new <project-name>
cd <project-name>

Now, verify the installation by serving the app on localhost:

ng serve -o

You should see the landing page of angular, and you are good to go. Now we need to install and register an additional package:

npm install @techiediaries/ngx-qrcode

Register it in app.module.ts. Make changes or copy the code below in app.module.ts file in app folder.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

// Import this module
import {NgxQRCodeModule} from '@techiediaries/ngx-qrcode'

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgxQRCodeModule    // Register the module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now lets create a new component to display the QR code with the required data.

ng generate component qrcode

This will generate 4 new files. Additionally, it will update the file app.module.ts by registering the component automatically. Now add the following code in qrcode.component.ts :

qrcode.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.css']
})
export class QrcodeComponent{
  elementType = 'url';
  data = 'https://geeksforgeeks.org/';
}

Here elementType can be ‘url’, ‘img’ or ‘canvas’. The url type can encode string type data. The data variable stores the data we want to encode. Now add the following code to qrcode.component.html:

qrcode.component.html

<ngx-qrcode
  [elementType]="elementType"
  [value]="data">
</ngx-qrcode>

We have used the ngx-qrcode tag to place a component. It takes the previous data as input. Now add this component in app.component.html :

app.component.html

<div>
  <app-qrcode></app-qrcode>
</div>

We can check it by starting the app :

ng serve -o

Open http://localhost:4200/ on your browser. You should see the following output. You can validate it by scanning the code using any app.

Encoding the JSON data: We can also embed JSON data into the QR code. First we need to create object that we want to embed. Note that we can only embed string data when using ‘url’ elementType. So we can create a string of this object using JSON.stringify(). See the code below for qrcode.component.ts to understand better:

qrcode.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-qrcode',
  templateUrl: './qrcode.component.html',
  styleUrls: ['./qrcode.component.css']
})
export class QrcodeComponent{
  elementType = 'url';
  obj = {
    cellTowers: [
      {
        cellId: 170402199,
        locationAreaCode: 35632,
        mobileCountryCode: 310,
        mobileNetworkCode: 410,
        age: 0,
        signalStrength: -60,
        timingAdvance: 15
      }
    ]
  }
  data = JSON.stringify(this.obj);
}

Output: