Post
Ask Question

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.
  1. import { NgxQRCodeModule } from 'ngx-qrcode2';  
  2. @NgModule({  
  3.    imports: [  
  4.        NgxQRCodeModule  
  5.    ],  
  6. })  
Step 4
 
Add variable in app.component.ts so as to configure the property.
  1. public BtcAddress = '';  
  2. constructor() {  
  3.     this.BtcAddress = 'HSwqRKAUeMBVas2Tn3vdrjJ8ddxDvuWsMG';  
  4. }  
Step 5
 
Put ngx-qrcode tag in app.component.html.
  1. <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.