How to Create/Generate QR Code in Angular 13?

Hi Dev,

Today, angular 13 qrcode example is our main topic. we will help you to give example of how to generate qr code in angular 13. let’s discuss about angular 13 qr code generator. you can see how to generate qr code in angular 13. follow bellow step for angular 13 angularx-qrcode example.

In this example we will use angularx-qrcode npm package to generate qr code in angular 13 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;
  
  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>

Run Angular App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Angular app:

ng serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:4200

now you can check it.

I hope it can help you...