In this article, we will see how to generate QR code in angular 13. In this example, we will use the angularx-qrcode npm package to generate QR code in the angular 13 application. we will simply install that angularx-qrcode npm package and use the QRCodeModule module to generate the QR code.
So, let's see how to generate QR code in angular 13, angular 13 QR code generator example, how to create QR code in angular 12/13, angular QR code generator, angular QR code generator, angularx-qrcode example.
In this step, we will create a new angular application using the below command.
ng new qr-code
In this step, we will install the angularx-qrcode package
npm install angularx-qrcode --save
Now, we will import the QRCodeModule module.
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 { }
In this step, we will update the app.component.ts file.
src/app/app.component.ts
import { Component, VERSION } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
public QrCode: string = null;
constructor() {
this.QrCode = 'websolutionstuff.com';
}
}
Now, we will update the app.component.html file.
src/app/app.component.html
<h2 style="text-align:center;margin-top:40px">How To Generate QR Code In Angular 13 - Websolutionstuff</h2>
<qrcode
[qrdata]="'stringQrCode'"
[width]="300"
[errorCorrectionLevel]="'M'"
style="text-align:center"
></qrcode>
In last, we need to run the server using the below command.
ng serve
Now, Go to your web browser, type the given URL and view the app output.
Output:
You might also like :
In this tutorial, we will see paypal payment gateway integration in laravel 8. Paypal is an international payment p...
Jan-10-2022
In this article, we will see multi step form wizard jquery validation. Here, we will learn jquery validation for mu...
Jan-30-2023
Many times we faced a Tokenmismatch error in laravel. This error occurs If you stay too long time on one form...
Jun-29-2020
In our ever-changing digital landscape, staying ahead of the competition is essential. And that's precisely what we&...
Jan-11-2023