Generate QR code using AngularJS - GeeksforGeeks

10 Mar, 2021
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:
 
AngularJS-Questions
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Angular PrimeNG Dropdown Component
Angular PrimeNG Calendar Component
Angular 10 (blur) Event
Angular PrimeNG Messages Component
How to make a Bootstrap Modal Popup in Angular 9/8 ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills