home.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="closeScanner()" color="success" expand="block">Close Scanner</ion-button>
    </ion-buttons>
    <ion-title>
      QR Scan
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [class.show-qr-scanner]="isOn">
  <ion-card class="welcome-card">
    <img src="/assets/qr.jfif" alt="" />
    <ion-card-header>
      <ion-card-subtitle>Get Started</ion-card-subtitle>
      <ion-card-title> QR Code Scan </ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <p>A fast, energy efficient, highly-configurable QR code scanner for Cordova apps.</p>
    </ion-card-content>
    <ion-button expand='block' margin (click)="goToQrScan()">Click to scan your QR Code</ion-button>
    <ion-item>
      <div *ngIf="QRSCANNED_DATA">
        <p>
          Scanned Code Text : <b>{{QRSCANNED_DATA}}</b>
        </p>
      </div>
    </ion-item>
  </ion-card>
</ion-content>