Angular: a simple way to generate and download a QRCode

Image for post
Image for post
Photo by Markus Winkler on Unsplash

QR Code today is no longer such a mysterious tool. In fact, more and more bars or restaurants are displaying their menu by scanning this code or the many advertisements present in stations or airports.

Telling the truth, this tool is nothing more than the direct consequence of the time we now spend on mobile phones.
It’s easier for a person to forget their documents at home than their mobile phone. And this is why, being able to be greener by saving paper, technology comes to our aid with these codes.

Attention!

I took it for granted but it is also good to report the definition that Wikipedia gives about the QR Code

A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) first designed in 1994 for the automotive industry in Japan. A barcode is a machine-readable optical label that contains information about the item to which it is attached. In practice, QR codes often contain data for a locator, identifier, or tracker that points to a website or application

It is precisely from the ever-increasing use of this tool that today we are going to create a small application in Angular that can generate a QRCode based on input and that is then able to download it in “.png” format.

Prerequisites

Before starting it would be useful to know a few things:

  • For development it would be advisable to have knowledge of Javascript (Typescript is recommended but not necessary) and Html;
  • Node v12 + installed on your machine;
  • Npm package manager since Angular, the Angular CLI and Angular applications depend on npm packages. In order to then install npm packages, you need an npm package manager. Follow this guide to understand how to use it.

Preparing our environment

If you do not want to install Angular on your machine, you can always refer to the site Stackblitz through which you can create an angular workspace conveniently online.
If not and you would like to have a working system on your local machine, continue with this section.

Creating projects, generating application and library code, performing tasks such as testing, building and deployment depend on Angular CLI.

To install the Angular CLI, open the terminal and run the following command:

npm install -g @angular/cli

At this point we create our workspace by running the following commands:

cd ~
ng new qrcode-app

With the ng new command, you will be asked a series of questions depending on the version you have installed of the Angular CLI, which you can accept with the default values.

Typical questions you should answer:

  • Would you like to add Angular routing? Yes
  • Which stylesheet format would you like to use? SCSS

This can take a few minutes.

Hello World

The first thing we are going to do after creating the project is to certainly start it and see by default what is present in our workspace.

cd qrcode-app
ng serve

At this point, open your browser and navigate to: http://localhost:4200/

As you can see, Angular’s CLI was kind enough to create a default page for us immediately displayed on the browser.

A look under the hood

Let’s go and find out what’s inside.
If you are interested in looking a little more in depth how an Angular Application starts, I recommend a look at my article here!

What interests us most of all right now is going to src/app/app.module.ts

Image for post
Image for post
app.module.ts

In Angular, a module class describes how the application parts fit together. Each application has at least one module and by convention, the root module is called AppModule.
Within this module we have the @ngModule decorator which takes a metadata object that tells Angular how to compile and launch the application.
Inside we have:

  • Imports: the list of imports that the application needs, including BrowserModule, necessary to start the application within the browser and AppRoutingModule within which the application routes are defined;
  • Declarations: defined the components of the application;
  • Providers: list of any future services;
  • Bootstrap: the root component that Angular creates and inserts into the index.html

At this point, let’s go to src/app/app.component.html and clean the code from the default template in order to replace it with our implementation of the QRcode generator.

Generating our first QRcode

To generate our first QRcode we will need to install a new library through npm. Therefore, open a new tab on the terminal and run the command:

npm install @techiediaries/ngx-qrcode

open the src/app/app.module.ts file again and import NgxQRCodeModule from @techiediaries/ngx-qrcode and FormsModule.

From documentation, FormsModule:

Exports the required providers and directives for template-driven forms, making them available for import by NgModules that import this module

Image for post
Image for post
app.module.ts

Now that we have imported the NgxQRCodeModule module, we can use the ngx-qrcode component in the application to achieve this:

Image for post
Image for post
exercise goal

Therefore we open src/app/app.component.ts and define constants that will be useful for generating the code.

Image for post
Image for post
app.component.ts

Be careful to define the type of code you are generating.
Among the other types present in NgxQrcodeElementTypes we have IMG and CANVAS.

At this point let’s move to the file where the magic happens src/app/app.component.html and add the ngx-qrcode component.

<div class="container">   <h1>QRCODE GENERATOR</h1>
<input [(ngModel)]="value">
<ngx-qrcode
[elementType]="elementType
[errorCorrectionLevel]="correctionLevel"
[value]="value"
cssClass="coolQRCode"></ngx-qrcode>
</div>

So let’s describe this template.

  • We have enclosed everything inside a div container in order to group the style of the elements inside it;
  • We have added an input that changes the generated QRCode when the text inside it changes;
  • ngx-qrcode is our component that creates the code and to which we have also added a CSS class so that we can change the style of our QRCode.

Not necessary, but more pleasing to the eye, here is also the SCSS I used for this output.

.container {
text-align: center;
input {
width: 200px;
padding: 10px;
font-size: 15px;
}
.coolQRCode {
filter: drop-shadow(3px 3px 3px #999);
img {
width: 250px;
}
}
}

What about the download?

We often have to print, store, or send someone a document. The same thing goes for the QRCode. If I wanted to advertise my personal website, I would not write on a flyer at the station in my city “www.mycoolwebsite.com”, rather it would make sense to print a flyer with a QRCode.
Simple, more immediate and cooler.

That’s why we add to our src/app/app.component.html a button under our <ngx-qrcode> component to start the download.

<button (click)="downloadQRCode()">Download QRCode</button>

At this point, all you have to do is create the “downloadQRCode” method, invoked at the click of the button in our component src/app/app.component.ts

public downloadQRCode() {
const fileNameToDownload = 'image_qrcode';
const base64Img = document.getElementsByClassName('coolQRCode')[0].children[0]['src'];
fetch(base64Img)
.then(res => res.blob())
.then((blob) => {
// IE
if (window.navigator && window.navigator.msSaveOrOpenBlob){
window.navigator.msSaveOrOpenBlob(blob,fileNameToDownload);
} else { // Chrome
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = fileNameToDownload;
link.click();
}
})
}

As you can see, our good old Internet Explorer takes a different approach, however, the practice is the same:

We retrieve the base64 of the image and start a save for explorer and a download for Chrome by creating an Anchor link.

Conclusions

There is little to add at the end of this article as the fun is now all tied to your imagination in using this tool.
If you have ideas or have created something interesting with QRCode, don’t hesitate to comment, I’m always happy to hear new ideas.

If you like this article press 👏 clap button 50 times or as many times you want. Feel free to ask a question if you have any. Thanks a lot for reading!

👨‍💻 Software dev ~ Frontend fan 🧙 ~ Alexa & AmazonSumerian enthusiast 🔮 ~ Those who can imagine anything, can create the impossible 💙

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store