Hello All, Today we will discuss the Ionic 4 QR code scanner 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. Now, Follow the below steps to implement the QR code scanner in Ionic 4.
Steps to follow to implement Ionic 4 QR code scanner example
1. Create a new page in Ionic 4 project by using CLI (Command Line Interface)
ionic g page qrcode-scanner
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 { }
3. Create a button in newly created HTML page qrcode-scanner.page.html
<ion-header>
<ion-toolbar>
<ion-title>QR Code Scanner - Example</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-button (click)="scanQR()">Start Scan</ion-button>
</ion-content>
4. Add below code to get the data from QR code
scanQR() {
this.qr.scan().then(data => {
console.log(data);
console.log('Data : ' + data.text);
alert(data.text);
}).catch(err => {
console.log('Error : ', err);
});
}
Our full qrcode.scanner.page.ts will look like this
import { Component, OnInit } from '@angular/core';
import { BarcodeScanner } from "@ionic-native/barcode-scanner/ngx";
@Component({
selector: 'app-qrcode-scanner',
templateUrl: './qrcode-scanner.page.html',
styleUrls: ['./qrcode-scanner.page.scss'],
})
export class QrcodeScannerPage implements OnInit {
constructor(private qr: BarcodeScanner) { }
ngOnInit() {
}
scanQR() {
this.qr.scan().then(data => {
console.log(data);
console.log('Data : ' + data.text);
alert(data.text);
}).catch(err => {
console.log('Error : ', err);
});
}
}
5. To scan the QR code, We are going to use below QR Code

6. Output for above code will look like this
Page1 Page2 Page3
As we can see in the above output, The button will display ‘START SCAN‘. After click on ‘START SCAN‘ button, We are calling our method scanQR(). This will call the plugin function scan() which will return the text inside of the QR Code successfully. As we have generated the QR code for our website name, As the result will return the same as shown in the above screenshot.