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.
