Generate QR Code in Angular Using angularx-qrcode

In this article, we will learn how to generate QR Code in Angular Using angularx-qrcode for our application. Let’s create a new project to implement QR Code in angular for that you need to run the following command to create a project.

ng new qrcode-generate

“qrcode-generate” you need to write your application’s name. Then it will take some time to create the project. After successfully installing that, you need to go to their directory. For example “cd qrcode-generate”. To Run angular applications, it required to run “ng serve”.

After that, we need to install the angularx-qrcode npm package in our application. For that run the below command to install.

npm install angularx-qrcode --save

After installing the module, we need to put it in our “app.module.ts” file so we can use it in our code. below is the code need to update in the “app.module.ts” files.

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

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { QRCodeModule } from 'angularx-qrcode';

  imports: [BrowserModule, FormsModule, QRCodeModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent]
export class AppModule {}

Let’s add the below code in our app.component.ts file to generate QR code.

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

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  public stringQrCode: string = null;

  constructor() {
    this.stringQrCode = '';

below code need to “app.component.html” file.

<h1>How to Generate QR Code in Angular? -</h1>

<qrcode [qrdata]="'stringQrCode'" [width]="250" [errorCorrectionLevel]="'M'"></qrcode>

Below is the full embeded code for QR Code in angular. you can easily used in your application.

Spread the love