Ionic angular: opening links in (external) mobile browser

Question

I do not want links to open inside my Ionic app, so I'm trying to get the links to open in the mobile browser. The first example here is working fine. When the URL is inside of the "window.open" command, then the external browser is launched as expected.

            <p class="descriptive-class">
               <a ng-href="" onclick="window.open('https://stackoverflow.com', '_system', 'location=yes')">
                  <img src="assets/img/awesome_picture.png" alt="blablabla">
               </a>
            </p>

The problem lays with this part, where I want to feed a parameter for the URL to the code. I cannot set it directly inside "window.open()", so I have to move it to 'ng-href' and then refer to it via 'this.href'.

Android does not seem to understand this correctly. It shows me the "Complete action using" dialog on Android, and then presents HTML document handler applications. It does not understand the browser link.

How can this be corrected best?

            <p class="descriptive-class">
               <a href="#" ng-href="item.webURL" onclick="window.open(this.href, '_system', 'location=yes')">
                  {{ item.webURL }}
               </a>
           </p>

Answer 1

In this case, the easiest way is to install the In App Browser plugin.

It opens an URL with the installed browser of the device. First add and install the plugin:

*$ ionic cordova plugin add cordova-plugin-inappbrowser*
*$ npm install --save @ionic-native/in-app-browser*

Add it to your app.module.ts

import { InAppBrowser } from '@ionic-native/in-app-browser';

And add it to your providers:

@NgModule({
  ...

  providers: [
    ...
    InAppBrowser
    ...
  ]
  ...
})

Then add on the relevant page:

constructor(private iab: InAppBrowser) { }

openBrowser(){
    this.iab.create('https://ionicframework.com/');
}

Call openBrowser() in your (click) method and you're set!

See also: https://ionicframework.com/docs/native/in-app-browser/

Answer 2

As of Feb 2020, this is what works in Ionic 4 & Ionic 5:

1) Install In App Browser plugin. Don't worry, it will open the links externally as you want it. Run the following commands in your project root:

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

2) In app.module.ts file, add the following code:

Add the import as shown below:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

Add support for InAppBrowser by adding it to the providers array as shown below:

 providers: [
        StatusBar,
        SplashScreen,
        InAppBrowser, // ---> Add it here
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],

3) In your desired component TS file or page TS file (example: support.page.ts), add the following code:

Add the import as shown below:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

Add the code in constructor as shown below:

constructor(private iab: InAppBrowser) {}

Add a method that opens the link to your desired webpage as shown below:

openPage(){
        this.iab.create('https://stackoverflow.com/'); // --> Change URL here
}

Add click event to your hyperlink as shown below:

<a href="#" (click)="openPage()">{{ item.webURL }}</a>

Result:

Now when you click on the Hyperlink, that should open your desired URL.

NOTE:

If you do not want to hardcode the URL and would rather want to open URLs dynamically, then you can use the following in your HTML page:

<a href="#" (click)="openAnyPage(item.webURL)">{{ item.webURL }}</a>

Add the following in your TS file:

openAnyPage(url){
        this.iab.create(url);
}

Result:

Now when you click on any Hyperlink, that should open your desired URL, without the need to hardcode them anywhere.

Answer 3

An update to @Gerben den Boer's answer:

You will run into errors like the following with the import as it is listed.

[ng] ERROR in src/app/components/app-component/app.module.ts(44,5): error TS2322: Type 'InAppBrowserOriginal' is not assignable to type 'Provider'.
[ng]   Type 'InAppBrowserOriginal' is not assignable to type 'ClassProvider'.
[ng]     Property 'provide' is missing in type 'InAppBrowserOriginal'.

To resolve this use the following import:

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

See: https://github.com/ionic-team/ionic-native/issues/2899