Create a QR Code Generator with Angular 10/9

Throughout this tutorial we are going to create a QR Code generator web application with Angular 10 so let’s get started.

You can also read the second part How To Read QR Codes In Angular ?

First, let’s start by creating an Angular 10 project using the Angular CLI.

Open your terminal or command prompt, depending on your operating system then generate a new Angular 10 project by running the following command:

ng new qrcode-generator Project 'qrcode-generator' successfully created.

After the command completion, proceed by installing ngx-qrcode2 from npm, which is an Angular 4+ component library to generate QR Codes.

cd qrcode-generatornpm install ngx-qrcode2 --save 

Open your project with your favorite code editor. I’m using Visual Studio Code which has a nice TypeScript support:

code .

Head over to the src/app/app.module.ts file and import NgxQRCodeModule from ngx-qrcode2 and add it to the list of module imports:

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { NgxQRCodeModule } from 'ngx-qrcode2';@NgModule({declarations: [    AppComponent],imports: [    BrowserModule,    NgxQRCodeModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }        

Once this is done you can use ngx-qrcode component to generate QR Codes. Head over to the src/app/app.component.html file and add:

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

Now you should add two variables value and elementType to your app component with some default values. Head over to the src/app/app.component.ts file and update it as follows:

import { Component } from '@angular/core';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})export class AppComponent {elementType : 'url' | 'canvas' | 'img' = 'url';value : string = 'Techiediaries';}

• value is of type string.
• elementType can take either url, canvas or img.

That’s it, you can now run the following command:

ng serve 

To serve your app and visit http://localhost:4200/. You should see a QR Code generated and rendered for the value “Techiediaries”.

Conclusion

We have created an Angular 10 application which makes use of ngx-qrcode2 component library to generate QR Codes. This is just a basic example demo but you can further develop it by binding the value variable to some pre and add more features.