Create a QR Code Generator with Angular 10/9

Create a QR Code Generator with Angular 10/9

In this post we will give you information about Create a QR Code Generator with Angular 10/9. Hear we will give you detail about Create a QR Code Generator with Angular 10/9And how to use it also give you demo for it if it is necessary.

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”.


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.

Hope this code and post will helped you for implement Create a QR Code Generator with Angular 10/9. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US