How do i make a clickable & open in an external browser in Ionic

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