Angular 4 QR Code Generator using ASP.NET Web API and C#

Share this

In this article, you will learn by creating an complete application from scratch for Angular 4 QR Code Generator using ASP.NET Web API and C#.

Technologies Used : Angular 4, ASP.NET Web API, HTML 5, Bootstrap

Pre-Requisites : Reader to have a fair understanding and experience in setting up & developing applications using Angular-4 and ASP.NET Web API, also installing packages using various package managers like Node Package Manager or ‘NPM’.

Use Case : Generate QR Code which can be scanned to download files stored on Azure Blob storage.

Tools needed : Visual Studio 2017. I hope the reader is familiar with setting up Angular 4 in Visual Studio.

External Libraries used : ZXing which can be used to generate QR code images. It can be found on GitHub : https://github.com/zxing Install this package using NuGet package manager.

Source Code : Complete source for the application can be found at GitHub repository :

https://github.com/sudipta-chaudhari/Angular4_QRCode_ASPNETWebAPI

Key Learnings :

(1) Setup Angular 4 in Visual Studio 2017

(2) Integrate Angular 4 with ASP.NET MVC and Web API

(3) Angular 4 routing

(4) Angular 4 HTTP Requests with Observables

(5) Angular 4 URL Search Params

(6) QR Code generation

(7) Downloading QR Code image from Base64 encoded string

(8) Using JavaScript BLOB object

(9) Loading spinner while fetching data asynchronously

Application Architecture :

Angular4_QR_Code_Architecture

Let’s proceed to code.

Step (1) : Create Visual Studio ASP.NET MVC Web API Solution

Create a new Visual Studio Project, select ‘ASP.NET Web Application(.NET Framework)’ and select the ‘MVC’ and ‘Web API’ check boxes.

Step (2) : Setup Angular 4 in Visual Studio 2017

Setup your Angular 4 development environment and install the dependencies using Node Package Manager (NPM). I have used ‘SystemJS’ in the Angular 4 setup.

Add typings.json and package.json files. Add a folder named app at the application root and create various typescript files – app.component.ts, app.module.ts, app.router.ts, bootstrap.ts and a typescript configuration file named tsconfig.json

Under app folder app subfolder home and add files home.component.html and home.component.ts. Add another subfolder under app folder and add files qrcode.component.html and qrcode.component.ts

You can find the code for these above mentioned files at GitHub repository mentioned at the start of this article.

Step (3) : Create ASP.NET Web API controller

The Web Api controller’s GET method will return a Base64 encoded string having the QR  code image.

Non .NET/Microsoft audience can create any REST api using Node.js, PHP etc to generate and return a Base64 encoded string having the QR  code image.

Create a GET api method named ‘GetQRCode’ as shown below.

‘GetQRCode’ method calls ‘GenerateQRCode()’ method which uses ‘BarCode’ writer method of ‘ZXing’ library. The result is saved to a ‘MemoryStream’ and converted and returned as a Base64 encoded string.

Step (4) : Create Angular view for QRCode component

Create a HTML 5 page as a partial view. Add a button text-box which will enable the user to input the filename and button which when clicked will take the file name entered in the text-box and generate and display the QR code on the page.

HTML 5 code code snippet for text-box and button :-

Step (5) : Create TypeScript for QRCode component

Typescript code for qrcodecomponent.ts is shown below. In the below code, getQRCode(filename: string) method calls the ASP.NET Web API controller to generate the QR Code.

downloadQRCode() method is used to download the generated QR code on click of Download QR Code button. In this method, Base64 encoded QRCode string is converted to JavaScript BLOB object and blob’s save method is called to save the QR Code image.

For browsers on which JavaScript BLOB object isn’t supported, an invisible anchor tag is created in the DOM body and the anchor tag’s click event is triggered to download the QR Code image.

For browsers like Safari where above two options aren’t supported, a data:image tag is used to open the Base64 encoded QR Code image string in a new window using window.open() method.

Above method makes an Angular HTTP GET request to the Web API which returns the Base64 encoded image data which is stored in a variable as an image tag using ‘data:image’ url.

The variable ‘isLoadingData’ in the above TypeScript code is used to display a loading spinner when the ‘Generate QR Code’ is clicked and till the QR code is generated and rendered.

Step (6) : Bind Typescript variable to Angular view

The resulting variable storing the image tag with Base64 encoded image data is then bound to the HTML view as shown below.

Since the variable ‘qrResult’ in the TypeScript code holds an tag, it has been bound in the ‘innerHtml’ of the ‘div’ element to render the contents as image.

Step (7) : Run the application

Before generating QR code, QR Code homepage view looks as below :

angular4_qrcodehomepage

Enter the file name in the text box and click “Generate QR Code button”. While the application generates QRCode image, a loading spinner blocks the page preventing user form performing any other actions as can be seen below:

angular4_qrcodegeneratingqr

After generating QR code, result looks as below :

angular4_qrcodgeneratedresult

Click “Download QR Code” button to download and save the QR Code image as a .PNG file.

I hope you followed the article. If you have any comments, questions or suggestions, leave a message and I will try to respond at my earliest.


Share this

4 thoughts on “Angular 4 QR Code Generator using ASP.NET Web API and C#”

Leave a Reply