Generate QR Codes with Angular 10

In this tutorial, we’ll learn how to generate QR codes in Angular by building a simple example application using the latest Angular 10 version. But first of all, what is a QR code anyway, and what purpose does it serve?


According to Wikipedia “A QR code (abbreviated from Quick Response code) is a type of matrix barcode (or two-dimensional barcode) [that]… often contain[s] data for a locator, identifier, or tracker that points to a website or application. A QR code uses four standardized encoding modes (numeric, alphanumeric, byte/binary, and kanji) to store data efficiently.”


Put simply, a QR code is a compact and efficient way of storing data. Now let’s look at how to generate QR codes in your Angular 10 apps by example.


Prerequisites

Before getting started you need a few things:

  • Basic knowledge of TypeScript, particularly familiarity with Object-Oriented concepts such as TypeScript classes and decorators.

  • A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the Angular CLI like the most frontend tools nowadays. You can simply go to the download page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: If you don’t want to install a local environment for Angular development but still want to try the code in this tutorial, you can use Stackblitz, an online IDE for front-end development that you can use to create an Angular project compatible with Angular CLI.


Step 1 — Installing Angular CLI 10

In this step, we’ll install the latest Angular CLI 10 version (at the time of writing this tutorial).

Angular CLI is the official tool for initializing and working with Angular projects. To install it, open a new command-line interface and run the following command:

$ npm install -g @angular/cli

At the time of writing this tutorial, angular/cli v10 will be installed on your system.


Step 2 — Creating a New Angular 10 App

Let’s now create our project. Head back to your command-line interface and run the following commands:

$ cd ~
$ ng new angular10qrcode

The CLI will ask you a couple of questions — If “Would you like to add Angular routing?” Type “y” for Yes, and for “Which stylesheet format would you like to use?” Choose “CSS”.


Next, navigate to your project’s folder and run the local development server using the following commands:

$ cd angular10qrcode
$ ng serve
<