in this article, we will learn how to generate QRCode in Angular for our application. For that first, let’s know about QRCode.
QRCode: QRCode stands for Quick Response code. Its a matrix type barcode (Two-dimensional Barcode). A QRCode is a machine-readable optical label that contains information about the item code. It contains alpha-numeric values.
All QR codes contain a square shape and include three square outlines in the bottom-left, top-left, and top-right corners. These square outlines define the orientation of the code.
Now let’s learn how to generate QRCode in Angular 10 with a simple example.
For that first, we need a library called “ngx-qrcode” We need to install library using below command.
npm install @techiediaries/ngx-qrcode
After installing module lets add a module in our app.module.ts file.
.... import { NgxQRCodeModule } from '@techiediaries/ngx-qrcode'; ... @NgModule({ imports: [ ..., NgxQRCodeModule ], .... })
After adding a module in the app.module file we can use it in our component to generate QRcode.
Let’s open app.component.ts file and add “import { NgxQrcodeElementTypes, NgxQrcodeErrorCorrectionLevels } from ‘@techiediaries/ngx-qrcode’;” then assign values to the variables to draw the QRCode.Below is the full code for app.component.ts & app.component.html.
In these eample we used 4 prperties of the “ngx-qrcode” called 1) elementType 2) errorCorrectionLevel 3) value 4) cssClass. For more potions and property from their official ngx-qrcode docs.
Below is the full embeded code for the QRCode you can easily used in your application.
Example
10 3
No Responses