Generate QR Code In Angular 7

Introduction

Here, we will learn how to generate a QR code dynamically using Angular 7 and download it. It's now a basic requirement of many applications to generate and download the QR code.

Prerequisites

Basic knowledge of Angular 7
Visual Studio Code
Angular CLI must be installed
NodeJS must be installed

Let’s get started.

Open Visual Studio Code and open a new terminal.

Generate And Download QR Code Using Angular 7

Type the following command to generate the new Angular 7 application.

ng new generate-qrcode --routing

Now, open the project by opening the folder from Visual Studio Code.

We have to install the QR Code package - the functionality for generating the QR code from the text.

Type the following command in the terminal.

npm install ngx-qrcode2 --save

Now, the package will be installed in our application.

Go to the app.module.ts file add a reference there for the QR code package.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxQRCodeModule } from 'ngx-qrcode2';
import { FormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
NgxQRCodeModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Open the app.component.html file and add the code in it.

<div style="text-align:center">
<input type="text" placeholder="Enter name to generate QR Code" [(ngModel)]="qrcodename"><br>
<button (click)="generateQRCode()">Generate QR Code</button>
<ngx-qrcode *ngIf="display" id="qrCodeImage" [qrc-element-type]="elementType" [qrc-value] = "value">
</ngx-qrcode><br>
<a [href]="href" *ngIf="display" (click)="downloadImage()" download>Download Image</a>
</div>
<router-outlet></router-outlet>

Finally, open the app.component.css file and add some CSS in it.

button {
padding: 10px;
background-color: skyblue;
margin-top: 10px;
}
input {
padding: 10px;
width: 15%;
}
a {
padding: 10px;
background-color: skyblue;
margin-top: 10px;
text-decoration: none;
}

That's it. We are done with it.

Run the application by typing the ng serve command.

Output

You can download the source code from here.

You can also refer to the next article that tells about reading the data of QR code from here.

Please give your valuable feedback/comments/questions about this article. Please let me know how you like and understand this article and how I could improve it.

6 Comments

Join the conversation! Your thoughts help the community grow.

LAKAMSANI KUMAR5y ago
How to add logo or text in the Qr code from angular
Mike Snyder7y ago
This is exactly what I was looking for, except that for some reason after installing the package and adding it to the imports, I get a "TypeError: ngModuleType.ngModuleDef is undefined" error.
Amit Kishore7y ago
Not working error is coming. Project definition is missing. Please give full information.
- Faisal Pathan7y ago
  Downlaod from git and check
Amit Mohanty7y ago
Nice description.
- Faisal Pathan7y ago
  Thanks for feedback