Seperate Functions for Browser and Devices

Ionic Framework ionic-v3
1

Hi,

my question is:

Can i seperate event functions for different Devices for the same “ion-item” ??. E.g

I have a Modal page which i want only show for mobile devices “ios and android”.
And in the browser i will do something different.

Simple Example for Mobile Devics::

    <ion-item (click)="openModalForDevices(item)" > // i want that the function only on IOS And Android devices will call
        ......
     </ion-item>

Simple Example for Mobile Devics::

         <ion-item (click)="openSomethingDifferentForBrowser(item)" > // i want this function only for Browser
                    ......
        </ion-item>

Note: This should be the same ion-item in the view html.

Have anyone an idea??
Thanks

2

Hi,

You can inject Platform to your component and use its “is” function.
for example;

in html

ion-item (click)=“openModal(item)” >
…
/ion-item>

in component:

constructor(private platform: Platform) { }
openModal(item) {
if( this.platform.is(‘mobileweb’)) {
call function for browser
} else if (this.platform.is(‘android’) || this.platform.is(‘ios’)) {
call function for device
}
}

3

Ok nice idea…
I did this.

if(this.platform.is("core") || this.platform.is("mobileWeb") || this.platform.is("mobile")){
  console.log("Deskopt pc: " + item);
  return;
};

if(this.platform.is("ios") || this.platform.is("android")){
  let myModal = this.modalCtrl.create(AddressBookModalPage, item);
  myModal.present();
  return;
}

but even on my android device the : console.log("Deskopt pc: " + item); is firing on the android console… so i think i ve did a mistake or what?

my second solution is that i use " showWhen=“ios, android” and showWhen=“core, mobileWeb, mobile” on the html file. the problem is i think that if i have 2 items in an iteration than i have 2 items per iteration the shown for ios / android and one for the desktop… i think this will result in performance problems isnt it?

thanks for your fast reply

4

Why don’t you use only one condition for web, because android is also mobile.

like:

this.platform.is(“mobileWeb”)

5

Thank you very much meliha. i got it. Have a nice day :slight_smile: