Create a QR Code Generator with Angular 4+

Throughout this tutorial we are going to create a QR Code generator web application with Angular 4+ so lets get started .

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

First ,lets start by creating an Angular 4 project using the Angular CLI .

Open your terminal or command prompt ,depending on your operating system ,then generate a new Angular 4 application by running :

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-generator
npm 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 src/app/app.module.ts .

Then 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 src/app/app.component.html 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 src/app/app.component.ts .

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

ng serve 

To serve your app ,then visit http://localhost:4200/ .

You should see a QR Code generated and rendered for the value "Techiediaries" .

Conclusion


We have created an Angular 4 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 textarea and add more features .

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status