QR Code Integration in Angular 9

Now a days we see QR Code Scanning in many applications. This is one of the most used feature.

In this tutorial we will see how to generate QR Code in angular 9.

Command to Install:

npm i angularx-qrcode

In appmodule.ts:

• Import the QRCode module and add it to imports section in your app module:

import { QRCodeModule } from 'angularx-qrcode';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  QRCodeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Component.html:

<qrcode [qrdata]="myAngularxQrCode" [width]="256" [errorCorrectionLevel]="'M'"></qrcode>

Component.ts:

 public myAngularxQrCode: string = null;

  constructor() {

    this.myAngularxQrCode = `BEGIN QRCODE:

    NAME: TECHNICAL ADDA

    CHANNEL: TECH ADDA

    DATE: 2020-07-18`;

  }