How to Generate QR Code in Angular?

Hi Dev,

In this tute, we will discuss how to generate qr code in angular. you can understand a concept of angular create qr code example. we will help you to give example of angular angularx-qrcode example. This tutorial will give you simple example of angular create qr code. Let's get started with create qr code angular.

we can easily generate qr code in angular 6, angular 7, angular 8, angular 9, angular 10, angular 11, angular 12, angular 13, angular 14, angular 15, angular 16 and angular 17 app.

In this example we will use angularx-qrcode npm package to generate qr code in angular 11 application. we will simply install that angularx-qrcode npm package and use QRCodeModule module to create code.

So, let's see bellow step and get qr code as like bellow screenshot:

Preview:

Step 1: Create New App

You can easily create your angular app using bellow command:

ng new myNewApp

Step 2: Install angularx-qrcode npm Package

Now in this step, we need to just install angularx-qrcode in our angular application. so let's add as like bellow:

npm install angularx-qrcode --save

Step 3: Import QRCodeModule

we will import QRCodeModule module as like bellow code:

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
  
import { AppComponent } from './app.component';
import { QRCodeModule } from 'angularx-qrcode';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    QRCodeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Update Ts File

here, we need to update ts file as like bellow:

src/app/app.component.ts

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public myAngularxQrCode: string = null;
  
  constructor () {
    this.myAngularxQrCode = 'ItSoluionStuff.com';
  }
}

Step 5: Update HTML File

here, we need to update html file as like bellow code:

src/app/app.component.html

<h1>How to Generate QR Code in Angular? - ItSolutionStuff.com</h1>
  
<qrcode [qrdata]="'myAngularxQrCode'" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Now you can run by bellow command:

ng serve

now you can check it.

I hope it can help you...