In this tutorial, you will learn, how to generate the QR Code in the Ionic 2 mobile application. The QR Code is used by many applications to carry the data, URL, etc.

The QR Code generation is very. It does not require hard coding. Simply install the below npm to generate the QR Code.

npm install angular2-qrcode

Preview the QR Code using the browser(Android, iOS, Windows).

Create a new Ionic 2 project using the below command.

ionic start app blank --v2

Now Install the QR code npm library using the below command.

cd app
npm install angular2-qrcode

Import the QRCodeModule class to the app.module.ts file.

import { QRCodeModule } from 'angular2-qrcode';

Now include the QRCodeModule class to imports section of app.module.ts file.

@NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,HttpModule,QRCodeModule,
IonicModule.forRoot(MyApp)
]

That's all. You are done. Now use the <qr-code> tag to generate the QR Code. Use the below code in the home.html file to generate the QR Code.

<ion-item>
<qr-code [value]="'UXC1234567'" [size]="200"></qr-code>
</ion-item>

The value property contains the actual value. You can use the variable to bind the value dynamically.

Save all the changes. Now you are ready to preview the QR Code. To preview the application use the below command.

The <qr-code> tag contains many properties. They are listed below.

attribute type default description
value String '' Your data string
size Number 100 This is the height/width of your QR Code component
level String 'L' QR Correction level ('L', 'M', 'Q', 'H')
background String 'white' The color for the background
backgroundAlpha Number 1.0 The opacity of the background
foreground String 'black' The color for the foreground
foregroundAlpha Number 1.0 The opacity of the foreground
mime String 'image/png' The mime type for the output image
padding Number null The padding around the QR Code
canvas Boolean false Will output a canvas element if true

Below is the Ionic 2 software information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.0.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.0
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1