Generate QR Code in Angular 10 (Easy)

In this article, we will use the third-party plugin named “NPM/angularx-QRcode” to create QR codes for your Angular and ionic applications. This plugin will work for Angular 2+ versions. To generate a QR code, follow the below steps. Within 2 minutes, you can convert your input string data to the QR code.

1. Install library to your project.

npm install angularx-qrcode — save

2. Update your “app.module.ts” file,

import { QRCodeModule } from 'angularx-qrcode';
...

@NgModule({
imports: [BrowserModule, FormsModule, QRCodeModule],
declarations: [AppComponent, HelloComponent],
bootstrap: [AppComponent]
})
...

3. Add code to your “main-app.component.ts” file,

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

@Component({
selector: 'my-main-app',
templateUrl: './main-app.component.html',
styleUrls: ['./main-app.component.css']
})
export class AppComponent {
public qrCodeStr: string = null;

constructor() {
this.qrCodeStr = 'Some string to generate QR Code';
}
}

4. Add code to your “main-app.component.ts” file,

<qrcode [qrdata]="'qrCodeStr'" [width]="300" [errorCorrectionLevel]="'M'"></qrcode>

Bingo, you did it.

References:

[1]. NPM library — angularx-qrcode

You may also like,

• Angular Basics: Import Multiple Exported Class With Same Name
• Angular Basics: Read Data From External File On Your Prod Build