Generate QR Code In Angular 7

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

Let’s get started.

Open Visual Studio Code and open a new terminal.

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.

<!--The content below is only a placeholder and can be replaced.-->
 <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.
 
 

You can download the source 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.

Source: C# Corner

The Tech Platform

www.thetechplatform.com