Angular 11 QR Code Generator Tutorial with Example

Angular 11 QR code generator tutorial; In this extensive guide, you will find an ideal way to create or generate QR codes in the Angular 11 application with the help of the angular2-qrcode package from scratch.

A QR code is the most popular method for securely scan the primary information. Ideally, it is a matrix barcode displayed in a square box being used in mobile devices for securely sharing the location information, essential data, product information through a scanning mechanism.

Additionally, in this tutorial, you will use the angualr2-qrcode library to create QR codes in angular applications. It is a powerful component that allows an exorbitantly facile way to integrate QR code in your angular project. It is based on qrious to generate or create QR Codes.

The Qrious is JavaScript based library which helps in QR code generation with the help of canvas

Generate QR Codes in Angular Example

  • Step 1: Install Angualr App
  • Step 2: Install angular2-qrcode Pacakge
  • Step 3: Update QRCodeModule in App Module
  • Step 4: Integrate QR Code Generator
  • Step 5: Put On Information in QR Code
  • Step 6: Customize QR Code
  • Step 7: Start Angular App

Install Angualr App

The first step commences by installing the sublime angular CLI tool:

npm install -g @angular/cli

Now, you can easily create a new angular app:

ng new angular-demo-app

Head over to project folder:

cd angular-demo-app

Install angular2-qrcode Pacakge

Next, execute command to add angular2-qrcode package in angular app:

npm install angular2-qrcode

Update QRCodeModule in App Module

Import QRCodeModule from ‘angular2-qrcode’ package and register the same package within the imports array. Likewise import and register the FormsModule in AppModule file.

Subsequently, head over to app.module.ts file:

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

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

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

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

export class AppModule { }

Integrate QR Code Generator

The <qr-code> directive creates a QR code image that you can use to get scanned for sharing some sort of information.

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

Put On Information in QR Code

Create some data for QR Code that should be attached to JSON stringify method, hence open the angular typescript template and update the provided code:

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

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

export class AppComponent {

  item = [{
    'name': 'Agatha Harkness',
    'played by': 'Kathryn Hahn',
    'Fictional universe': 'Marvel Universe',
    'Creator': 'Stan Lee'
  }]

  qrInfo = JSON.stringify(this.item);

}

Similarly, go ahead and define the qr-code directive with size and value properties to generate the QR code image in app.component.html:

<qr-code [value]="qrInfo" size="350"></qr-code>

Angular QR Code Customization Example

So far you have created a simple QR codes, nonetheless we will show how to create a customizable QR code in angular. Whose look and feel can be easily transformed, so open app.component.html file and add the suggested code:

<h2>Angular QR Code Customization Example</h2>

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

<label>
  Change name: <input [(ngModel)]="values" placeholder="name" />
</label>

<br />
<br />
<br />

<strong>Change to</strong>:
<button (click)="qrData('Monica Rambeau')">Monica Rambeau</button>
<button (click)="qrData('Nosy Neighbor')">Nosy Neighbor</button>
<button (click)="qrData('Mephisto')"> Mephisto</button>

<br />
<br />
<br />

<strong>Change Width</strong>:
<button (click)="qrWidth(550)">550</button>
<button (click)="qrWidth(450)">450</button>
<button (click)="qrWidth(350)">350</button>
<button (click)="qrWidth(250)">250</button>

<br />
<br />
<br />

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

Open and append the given below code in app.component.ts file:

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

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

export class AppComponent {

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

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

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

  qrData(val: string) {
    this.values = val;
  }

  qrWidth(val: number) {
    this.width = val;
  }
}

Create three custom functions that update the name, width, and level of the QR code component and add some static values to the QR code module; anyhow, you can insert dynamic values to deal with the QR code

Start Angular App

You can ultimately start the angular development server using the ng serve command:

ng serve

Here is the url that can help you test the app:

http://localhost:4200

Angular 11 QR Code generator

Conclusion

The Angular 11 QR Code generator example is over, and this tutorial helped us understand the whole process of integrating QR Codes in the angular project. We assume you liked this guide; let us know if you have feedback for us.