Seperate Functions for Browser and Devices



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

Simple Example for Mobile Devics::

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

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

Have anyone an idea??



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

in html

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


in component:

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


Ok nice idea…
I did this.

if("core") ||"mobileWeb") ||"mobile")){
  console.log("Deskopt pc: " + item);

if("ios") ||"android")){
  let myModal = this.modalCtrl.create(AddressBookModalPage, item);

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


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



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