ion-button redirects to correct page on android app but not ios app

Hello I have a concert venue app that has an android version and an ios version. This app lists all the concerts at this venue, and when you click on a show it will display a new page for that particular show. The problem I am having is with the facebook button and the tickets button on the specific show pages. Each should link you to the venues facebook and to the ticket page, however on the ios versions specifically the buttons don’t do anything. Everything has been working fine for a long time now this issue just seemed to randomly appear overnight. The app uses ion and html so the two versions do not use separate code at all which makes this situation even more odd.

I have searched the internet for similar issues and have not found anything that has helped, I have studied up a bit more on the ion buttons and the code seems accurate, and I have played around with it a bit on my local host and can’t seem to find why it’s not working on only the ios version.

I believe this is the relevant code from the .html file.

    <button ion-button block large icon-left (click)="openFacebook()">

This is from the .ts file.

openFacebook() {
  window.open(this.selectedItem.facebook_url, '_system', 'location=yes');
 }

The tickets code is similar just replace “facebook” with “tickets”.

You should be redirected to the proper page however nothing happens when the buttons are clicked on the ios version of the app.

You can try install an in-app brower plugin.
It works on iOS for open an apple store link.

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

Some change on your code

<div *ngFor="let item of items">
<button ion-button block large icon-left (click)="openFacebook(item?.facebook_url)">
</div>
openFacebook(url) {
  window.open(url, '_system', 'location=yes');
 }

Sorry for the extremely delayed response. I have downloaded the inappbrowser and followed the documentation and many other posts but I am still having the same issue. Is there something that I am missing? This is what my .ts file looks like now:

import { Component } from ‘@angular/core’;

import { NavController, NavParams } from ‘ionic-angular’;

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

@Component({
selector: ‘page-item-details’,
templateUrl: ‘item-details.html’
})
export class ItemDetailsPage {
selectedItem: any;

constructor(public navCtrl: NavController, public navParams: NavParams, private InAppBrowser: InAppBrowser) {
// If we navigated to this page, we will have an item available as a nav param
this.selectedItem = navParams.get(‘item’);
}

openFacebook() {
window.open(this.selectedItem.facebook_url, ‘_system’, ‘location=yes’);
}

openTickets() {
cordova.InAppBrowser.open(this.selectedItem.tickets_url, ‘_system’, ‘location=yes’);
}
}