1. We start by creating an Angular project using Angular CLI:

ng new qrcode-generator

2. We install ngx-qrcode, an Angular Component library for Generating QR (Quick Response) Codes.

npm install @techiediaries/ngx-qrcode --save

3. Enter into your project folder and open your favorite code editor

cd qrcode-generator
atom .    or  code .

4. Into src/app/app.module.ts we import NgxQRCodeModule from ngx-qrcode

[cc lang=”javascript” line_numbers=”true”]

import { NgxQRCodeModule } from ‘ngx-qrcode’;

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxQRCodeModule
],

[/cc]

5. Now we can use ngx-qrcode component to generate QR Codes

In src/app/app.component.html we will add:

[cc lang=”javascript” line_numbers=”true”]


[/cc]

6. We will add two variables: value and elementType to our app component with some default values.

Head over to src/app/app.component.ts .

[cc lang=”javascript” line_numbers=”true”]
import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
elementType: ‘url’ = ‘https://software.making.center/’;
value : string = ‘Web Development Center’;
}
[/cc]

value is of type string.

elementType can take either url, canvas or img.

7. We can now run our Angular app

ng serve -o

and we will see it at http://localhost:4200/

We will see a QR Code generated and rendered for the value “Web Development Center”

8. Into the point 5 we can add some more options

[cc lang=”javascript” line_numbers=”true”]


[/cc]

We can also specify the QRCode version (1 to 40) explicitely:

 

[cc lang=”javascript” line_numbers=”true”]

[/cc]

Conclusion

We have created an Angular application which makes use of ngx-qrcode component library to generate QR Codes.

This is just a basic example demo.

Please further develop it by binding the value variable to some textarea and add more features. Send us the code snippet to help others, too.