Issue
I made a Qr code scanner using ionic. When I scan links, they aren't clickable. How do I make them clickable and open them in an external browser ?
The code is provided below :
home.page.html :
<ion-header>
<ion-toolbar color="primary" >
<ion-title>
QR Scanner
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-card>
<ion-card-header>Result :</ion-card-header>
<ion-card-content>
<ion-item *ngIf="scannedCode">
{{ scannedCode }}
</ion-item>
<ion-button (click)="scanCode()" fill="outline" id="btn-enter" size="default" ><ion-icon name="qr-code-outline" slot="start"></ion-icon>
Scan Again</ion-button>
</ion-card-content>
</ion-card>
</ion-content> ```
home.page.ts file :
import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx'
import { NavController } from '@ionic/angular';
import { NullVisitor } from '@angular/compiler/src/render3/r3_ast';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
scannedCode: string="";
constructor(private barcodeScanner : BarcodeScanner,
private navCtrl : NavController) {}
scanCode(){
this.barcodeScanner.scan().then(
barcodeData => {
this.scannedCode = barcodeData.text;
}
)
}
ngAfterViewInit(){
this.scanCode();
}
}
Solution
Use: In App Browser Plugin. https://ionicframework.com/docs/native/in-app-browser
When your scanning completes pass that URL to to your in app browser function. e.g:
import { InAppBrowser , InAppBrowserOptions } from '@ionic-native/in-app-browser';
export class HomePage {
options : InAppBrowserOptions = {
location : 'yes',//Or 'no'
hidden : 'no', //Or 'yes'
clearcache : 'yes',
clearsessioncache : 'yes',
zoom : 'yes',//Android only ,shows browser zoom controls
hardwareback : 'yes',
mediaPlaybackRequiresUserAction : 'no',
shouldPauseOnSuspend : 'no', //Android only
closebuttoncaption : 'Close', //iOS only
disallowoverscroll : 'no', //iOS only
toolbar : 'yes', //iOS only
enableViewportScale : 'no', //iOS only
allowInlineMediaPlayback : 'no',//iOS only
presentationstyle : 'pagesheet',//iOS only
fullscreen : 'yes',//Windows only
};
constructor(private theInAppBrowser: InAppBrowser) {
}
openWithSystemBrowser(url : string){
let target = "_system";
this.theInAppBrowser.create(url,target,this.options); // this will open mobile browser;
}
}
Answered By - Najam Us Saqib
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.