How to Create/Generate QR Code in Angular 16

To generate QR codes in an Angular application, we’ll use a third-party library called “ngx-qrcode2.” This library allows us to easily create QR codes with different data types.

So, In this tutorial, you will learn how to generate or create a QR code in angular 16 using ngx-qrcode2 library.

How to Create/Generate QR Code in Angular 16

Steps to create or generate QR code in angular 16 projects:

Step 1 – Set Up a New Angular Project
Step 2 – Install the ngx-qrcode2 Library
Step 3 – Import the QR Code Module
Step 4 – Create QR Code in Component
Step 5 – Create a QR Code in the Template
Step 6 – Add CSS Styling (Optional)
Step 7: Test the QR Code Generator Component

Step 1 – Set Up a New Angular Project

First of all, open your cmd or command prompt and execute the following command on it to install and create a new Angular project:

ng new my-new-app

Step 2 – Install the ngx-qrcode2 Library

Next, you need to install ngx-qrcode2 in your angular application. Now, type the below given command on cmd for that:

npm install ngx-qrcode2 --save

Step 3 – Import the QR Code Module

Open the app.module.ts file located in the src/app directory, and import the QRCodeModule from ngx-qrcode2:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { QRCodeModule } from 'ngx-qrcode2'; // Import the QRCodeModule here

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, QRCodeModule], // Add the QRCodeModule to the imports array
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Step 4 – Create QR Code in Component

Next, you need to generate a new component using the Angular CLI:

ng generate component qrcode-generator

Open the qrcode-generator.component.ts file located in the src/app/qrcode-generator directory, and add the following code:

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

@Component({
  selector: 'app-qrcode-generator',
  templateUrl: './qrcode-generator.component.html',
  styleUrls: ['./qrcode-generator.component.css'],
})
export class QRCodeGeneratorComponent implements OnInit {
  qrData: string = 'Hello, world!'; // The data you want to encode in the QR code

  constructor() {}

  ngOnInit(): void {}
}

Step 5 – Create a QR Code in the Template

Open the qrcode-generator.component.html file and add the following code to display the generated QR code:

<div class="qrcode-container">
  <qrcode [qrdata]="qrData"></qrcode>
</div>

Step 6 – Add CSS Styling (Optional)

If you want to add some styling to the QR code container, you can do so by modifying the qrcode-generator.component.css file:

.qrcode-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

Step 7: Test the QR Code Generator Component

Finally, let’s test the QR code generator component. Open the app.component.html file located in the src/app directory, and replace its content with the following:

<div style="text-align:center">
  <h1>
    Welcome to QR Code Generator in Angular 16 Applications!
  </h1>
  <app-qrcode-generator></app-qrcode-generator>
</div>

Then, start the development server by executing the below given command in the cmd:

ng serve

Open your browser and navigate to http://localhost:4200/, and you should see your Angular app with the QR code displayed on the page.

Conclusion

That’s it! You have successfully created a QR code generator in your Angular application using the ngx-qrcode2 library. You can now customize the QR data and appearance according to your requirements.