qr_code_scanner

IONIC 4 QR CODE SCANNER EXAMPLE

by
Share the post

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

qr code 1
Sample QR Code

6. Output for above code will look like this

  • Screenshot 20210102 165449 MyApp
    Page1
  • Screenshot 20210102 165540 MyApp
    Page2
  • Screenshot 20210102 165551 MyApp
    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.

Leave a Comment