ngx-qrcode2 In Angular

In this blog, we will learn how to use ngx-qrcode2 in Angular.

In this blog, we will learn how to use ngx-qrcode2 in Angular.

 

Step 1

 

First, we need to create an Angular project using Angular CLI.

 

ng new demo --skip-tests --spec false

 

--skip-tests command is for removing the test projects

--spec false command is for skipping the test file generation

 

 

Step 2

 

Add ngx-qrcode2 package to your project.

 

npm install ngx-qrcode2 --save

 

--save command is for adding an external property.

 

 

Step 3

 

Import QRCodeModule in app.component.ts.

import { NgxQRCodeModule } from 'ngx-qrcode2';
@NgModule({
   imports: [
       NgxQRCodeModule
   ],
})

Step 4

 

Add variable in app.component.ts so as to configure the property.

public BtcAddress = '';
constructor() {
    this.BtcAddress = 'HSwqRKAUeMBVas2Tn3vdrjJ8ddxDvuWsMG';
}

Step 5

 

Put ngx-qrcode tag in app.component.html.

<ngx-qrcode qrc-element-type="canvas" [qrc-value]="BtcAddress"></ngx-qrcode>

Step 6

 

Run your application.

 

ng serve -o

 

Conclusion

Thanks a lot for reading. I hope you liked this blog. Please share your suggestions and feedback.