Hello All, In the last topic we had discussed the Ionic 4 OCR ( Optical Character Recognition ) example. Today we will discuss the Ionic 4 QR code generator with the help of an example. We are going to use phonegap-plugin-barcodescanner. Before we start the implementation make sure that all software & dependencies are installed. Create a new project using Ionic 4 & do follow the below steps to implement the QR code scanner in Ionic 4.
Steps to follow to implement Ionic 4 QR code generator example
1. Create a new page in Ionic 4 project by using CLI (Command Line Interface)
ionic g page qrcode-generator
2. Add Plugin & Dependency as shown below
ionic cordova plugin add phonegap-plugin-barcodescanner
npm install @ionic-native/barcode-scanner
3. Add dependency to app.module.ts
After adding the plugin & npm dependency, We have to add them into our app.module.ts
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
Add the dependency into providers as shown below
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
The full app.module.ts will look like this
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
providers: [
StatusBar,
SplashScreen,
BarcodeScanner,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
4. Create a button in newly created HTML page qrcode-generator.page.html
<ion-header>
<ion-toolbar>
<ion-title>QR Code Generator</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-label>Generate QR For</ion-label>
<ion-input type="text" [(ngModel)]="siteName"></ion-input>
</ion-item>
<ion-item>
<ion-button (click)="generateQR()">Generate QR Code</ion-button>
</ion-item>
</ion-list>
</ion-content>
5. Add below code to get the QR Code from Text ( We are passing URL as a String here )
generateQR() {
this.qr.encode(this.qr.Encode.TEXT_TYPE,this.siteName).then(data => {
console.log(data);
this.siteName = data;
}).catch(err => {
console.log('Error : ', err);
});
}
As seen in above code, We are encoding the TEXT_TYPE string & will generate the QR code for the same. Therefore, We are passing the TEXT_TYPE as a first parameter for the encode function.
Our full qrcode.generator.page.ts will look like this
import { Component, OnInit } from '@angular/core';
import { BarcodeScanner } from "@ionic-native/barcode-scanner/ngx";
@Component({
selector: 'app-qrcode-generator',
templateUrl: './qrcode-generator.page.html',
styleUrls: ['./qrcode-generator.page.scss'],
})
export class QrcodeGeneratorPage implements OnInit {
siteName : string = "https://developmobileapplications.com/";
constructor(private qr: BarcodeScanner) { }
ngOnInit() {
}
generateQR() {
this.qr.encode(this.qr.Encode.TEXT_TYPE,this.siteName).then(data => {
console.log(data);
this.siteName = data;
}).catch(err => {
console.log('Error : ', err);
});
}
}
The output is as shown below
HTML 
Output
As seen in above images we can able to generate QR code in Ionic 4 application. Now, We will discuss the infinite scroll in Ionic in next Ionic 4 post.