How To Generate QR Code In Angular

The Code Points August 21, 2022 0

In this article, we will learn about the how to generate QR code in angular. A QR(Quick Response) code is a type of matrix barcode(two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently.

Now let's start with implementation how to generate QR codes in Angular apploication using creating an example.

First we need to create a new angular application for it.

Use following command into the terminal for create a new angular application. 

ng new AngualrQRCodeExample

Now, install the the @techiediaries/ngx-qrcode npm package for QR code genration.

npm install @techiediaries/ngx-qrcode --save

Add the @techiediaries/ngx-qrcode NgxQRCodeModule into the app.module.ts file using following code.

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode';
import { FormsModule } from '@angular/forms';

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

After importing this package we are able to use the ngx-qrcode component in our application .

Now, Use the following code and add the ngx-qrcode component into the app.component.html file.

<div>
  <h1>
    QR Code Generator In Angular
  </h1>
  <ngx-qrcode
    [value]="value"
    alt="Demo QR Code"
    cssClass="box-shadow">
  </ngx-qrcode>
  <textarea [(ngModel)] = "value"></textarea>
</div>

Now, Use the following code Add the variable into the app.component.ts file for two-way binding to assign the QR code value.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  value = 'The Code Points';
}

Now, run the application and see the browser screen QR is generate as per you text change.

Conclusion

In this article, we learned how to generate QR code in angular application with example.

I hope this article helps you and you will like it.👍

If you have any doubt or confusion then free to ask in comment section.