How To Add Qr Code With Angular 4

Throughout this quick tutorial, you will understand how to swiftly integrate QR and Barcode scanner in the Ionic Angular application using the barcode scanner plugin.

We volition aslo share how to create functionality to scan barcode and how to generate bar codes in ionic app from scratch.

Norman Joseph Woodland invents the barcode, and it is a method of interpreting data in a visual or machine-readable class.

In mod era barcode has get the office of our daily lives nowadays Barcodes are referred to products as a means of firsthand identification.

In the purchase process, they are playing the vital role. Similarly, they likewise play a critical role in tracking the inventory, handling invoices, and many more.

Let us endeavour to implement QR or Barcode scanner in Ionic application using the barcode scanner packet.

Ionic Native and Cordova registry offers the very crawly Barcode Scanner plugin. It helps open the photographic camera view and automatically browse a barcode; afterwards scanning, information technology gives dorsum the essential data.

It supports a flawlessly broad array of modern platforms, for instance, Android, BlackBerry ten, Browser, iOS, and Windows.

Build Barcode Scanner in Ionic six Angular

Step 1: Getting Started
Stride ii: Install Barcode Scanner Plugin
Step iii: Add Plugin into App Module
Step 4: Create Barcode Scanner
Step 5: Generate Barcode or QR Code
Stride 6: Terminal QR/Barcode Scanner Integration
Step vii: Start Application

Getting Started

You must have Ionic CLI added to your system to commence the evolution in Ionic ideally.

                          npm              install              -g @ionic/cli

Y'all are at present able to install a blank new ionic angular app:

            ionic start ionic-barcode-app bare --type=angular

Apply command to get into the app folder:

                          cd              ionic-barcode-app

Remove Type Errors

You have to remove strict type errors brand sure to set "strictTemplates": false in angularCompilerOptions in tsconfig.json file.

Install Barcode Scanner Plugin

Afterwards getting inside the awarding directory, type all three commands on the command prompt to outset installing bar code scanner and ionic native plugins.

            ionic cordova plugin              add together              phonegap-plugin-barcodescanner              npm              install              @ionic-native/barcode-scanner              npm              i @ionic-native/core

Add together BarcodeScanner into App Module

Afterward adding the QR code plugin into the ionic app, you require to add together the barcode scanner into the app module class; this plugin will be available throughout the app, and you can access its methods seamlessly.

Insert code in app.module.ts file:

                          import              {              NgModule              }              from              '@angular/core'              ;              import              {              BrowserModule              }              from              '@angular/platform-browser'              ;              import              {              RouteReuseStrategy              }              from              '@angular/router'              ;              import              {              IonicModule,              IonicRouteStrategy              }              from              '@ionic/angular'              ;              import              {              AppComponent              }              from              './app.component'              ;              import              {              AppRoutingModule              }              from              './app-routing.module'              ;              // module              import              {              BarcodeScanner              }              from              '@ionic-native/barcode-scanner/ngx'              ;              @NgModule              (              {              declarations:              [AppComponent]              ,              entryComponents:              [              ]              ,              imports:              [BrowserModule,              IonicModule.              forRoot              (              )              ,              AppRoutingModule]              ,              providers:              [              BarcodeScanner,              {              provide:              RouteReuseStrategy,              useClass:              IonicRouteStrategy              }              ]              ,              bootstrap:              [AppComponent]              ,              }              )              export              grade              AppModule              {              }

Create Barcode Scanner

Creating a barcode scanner is simple, head over to TypeScript template and import BarcodeScanner and BarcodeScannerOptions at the acme.

                          import              {              BarcodeScanner,              BarcodeScannerOptions              }              from              "@ionic-native/barcode-scanner/ngx"              ;

Inject BarcodeScanner api into the constructor method, declare barcode scanner options, the scanBRcode() method allows scanning the QR code.

                          export              class              HomePage              {              encodedData:              whatever              ;              scannedBarCode:              {              }              ;              barcodeScannerOptions:              BarcodeScannerOptions;              constructor              (              individual              scanner:              BarcodeScanner)              {              this              .encodedData              =              "Programming isn't most what yous know"              ;              this              .barcodeScannerOptions              =              {              showTorchButton:              true              ,              showFlipCameraButton:              true              }              ;              }              scanBRcode              (              )              {              this              .scanner.              scan              (              )              .              then              (res              =>              {              this              .scannedBarCode              =              res;              }              )              .              take hold of              (err              =>              {              alert              (err)              ;              }              )              ;              }              }

Create a button to bind the scan br code method; when the barcode is scanned, information technology will display the device screen's output.

                                                            <ion-card                >                                                              <ion-button                colour                                  =                  "danger"                                (click)                                  =                  "scanBRcode()"                                expand                                  =                  "cake"                                >                            Scan Barcode                                                </ion-button                >                                                              </ion-card                >                                                              <ion-carte                >                                                              <div                *ngIf                                  =                  "scannedBarCode"                                >                                                              <ion-item                >                            Scanned code output:                                                <strong                >              {{ scannedBarCode["text"] }}                                  </stiff                >                                                              </ion-particular                >                                                              <ion-item                >                            Scanned code output:                                                <strong                >              {{ scannedBarCode["format"] }}                                  </strong                >                                                              </ion-item                >                                                              </div                >                                                              </ion-card                >

Yous tin can scan the given below barcode:

Barcode Scanner

This will be the result after scanning the higher up QR code.

Ionic QR Code example

Generate Bar Lawmaking

Similarly, we can generate bar code in ionic using encode() method, you lot need to update TypeScript and HTML templates of Ionic app. We have added the text for the barcode. However, you can add together new text in the input field and click on the generate bar code button to create a new ane.

                          generateBarCode              (              )              {              this              .scanner.              encode              (              this              .scanner.Encode.              TEXT_TYPE              ,              this              .encodedData)              .              then              (              res              =>              {              warning              (res)              ;              this              .encodedData              =              res;              }              ,              fault              =>              {              warning              (error)              ;              }              )              ;              }

                                                            <ion-card                >                                                              <h3                >              Generate New QR Lawmaking                                  </h3                >                                                              <ion-input                placeholder                                  =                  "Enter Input"                                [(ngModel)]                                  =                  "encodedData"                                >                                                              </ion-input                >                                                              <ion-button                colour                                  =                  "chief"                                (click)                                  =                  "generateBarCode()"                                expand                                  =                  "block"                                >                            QR Lawmaking Create                                                </ion-button                >                                                              </ion-card                >

Generate Bar Code

Final QR/Barcode Scanner Integration

Here is the final QR/Barcode scanner integration in ionic app. Nosotros have combined all the codes you tin use to scan QR codes in ionic and generate QR codes in the ionic application.

Place suggested code in domicile.page.ts file:

                          import              {              Component              }              from              '@angular/core'              ;              import              {              BarcodeScanner,              BarcodeScannerOptions              }              from              "@ionic-native/barcode-scanner/ngx"              ;              @Component              (              {              selector:              'app-habitation'              ,              templateUrl:              'domicile.page.html'              ,              styleUrls:              [              'home.page.scss'              ]              ,              }              )              export              form              HomePage              {              encodedData:              any              ;              scannedBarCode:              {              }              ;              barcodeScannerOptions:              BarcodeScannerOptions;              constructor              (              private              scanner:              BarcodeScanner)              {              this              .encodedData              =              "Programming isn't about what y'all know"              ;              this              .barcodeScannerOptions              =              {              showTorchButton:              true              ,              showFlipCameraButton:              true              }              ;              }              scanBRcode              (              )              {              this              .scanner.              browse              (              )              .              so              (res              =>              {              this              .scannedBarCode              =              res;              }              )              .              catch              (err              =>              {              warning              (err)              ;              }              )              ;              }              generateBarCode              (              )              {              this              .scanner.              encode              (              this              .scanner.Encode.              TEXT_TYPE              ,              this              .encodedData)              .              so              (              res              =>              {              alert              (res)              ;              this              .encodedData              =              res;              }              ,              error              =>              {              alert              (mistake)              ;              }              )              ;              }              }

Insert lawmaking in abode.page.html file:

                                                            <ion-header                [translucent]                                  =                  "true"                                >                                                              <ion-toolbar                >                                                              <ion-title                >                            Ionic QR Code Example                                                </ion-title                >                                                              </ion-toolbar                >                                                              </ion-header                >                                                              <ion-content                [fullscreen]                                  =                  "true"                                >                                                              <ion-card                >                                                              <ion-button                color                                  =                  "danger"                                (click)                                  =                  "scanBRcode()"                                expand                                  =                  "block"                                >                            Scan Barcode                                                </ion-button                >                                                              </ion-bill of fare                >                                                              <ion-card                >                                                              <div                *ngIf                                  =                  "scannedBarCode"                                >                                                              <ion-item                >                            Scanned code output:                                                <strong                >              {{ scannedBarCode["text"] }}                                  </strong                >                                                              </ion-item                >                                                              <ion-detail                >                            Scanned code output:                                                <strong                >              {{ scannedBarCode["format"] }}                                  </strong                >                                                              </ion-item                >                                                              </div                >                                                              </ion-menu                >                                                              <ion-card                >                                                              <h3                >              Generate New QR Code                                  </h3                >                                                              <ion-input                placeholder                                  =                  "Enter Input"                                [(ngModel)]                                  =                  "encodedData"                                >                                                              </ion-input                >                                                              <ion-button                colour                                  =                  "primary"                                (click)                                  =                  "generateBarCode()"                                expand                                  =                  "cake"                                >                            QR Code Create                                                </ion-button                >                                                              </ion-card                >                                                              </ion-content                >

Start Application

We have created the barcode scanner characteristic now we are merely left with testing the feature we created. Hence, you tin can test the app on the emulator.

So, use control to add the platform for iOS, Android or Windows:

            ionic cordova platform              add              ios  ionic cordova platform              add              android  ionic cordova platform              add              windows

Create the ionic app build:

            ionic cordova build ios  ionic cordova build android  ionic cordova build windows

Finally, start the application:

            ionic cordova run ios -fifty  ionic cordova run android -l  ionic cordova run windows -l

Conclusion

So this was it, this quick tutorial profoundly gave you details most all the instructions which is predetermined to implement barcode and QR code scanner in ionic app. Nosotros hope yous volition share this tutorial with others to help the evolution community.