In this tutorial, learn how to generate QR codes in Angular 15 step by step.

Generating QR codes in Angular can be done with ease by using the angularx-qrcode plugin.

In this blog post, we will guide you through the process of integrating this plugin in your Angular project.

Step 1 – Create New Angular App

let's start by creating an Angular 15 project using the Angular CLI.

Open your terminal or command prompt, and generate a new angular project by running the following command:

ng new qrcodedemo

Step 2 – Install angularx-qrcode npm Package

To install the angularx-qrcode plugin, you need to run the following command in your terminal:

npm install angularx-qrcode

Step 3 – Import the module

Once the installation process is complete, you need to import the QRCodeModule in your application's module.

import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
  imports: [
    QRCodeModule
  ]
})
export class AppModule { }

Step 4 – Usage

Once you have imported the module, you can use the qrcode component in your HTML file, like below:

<qrcode [qrdata]="qrcodedata" [size]="256" [level]="'M'"></qrcode>

In the above code, qrdata is the data that you want to encode in the QR code. The size parameter is the size of the QR code and level is the error correction level (L, M, Q, H).  

Step 5 – Add Code On Component ts File

import { Component } from '@angular/core';
   
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public qrcodedata: string = null;
   
  constructor () {
    // assign a value
    this.qrcodedata= 'Your QR code data here';
  }
}

Step 6 – Output

Now, you can run the project and see the generated QR code. You can easily customize the QR code by changing the parameters in the HTML file.

ng serve

Conclusion

Generating QR codes in Angular can be done with ease by using the angularx-qrcode plugin. This plugin is lightweight and easy to use, making it a great choice for Angular projects.