Show/hide elements according to platform in Ionic 5

Question

In my project I want to use an 'ion-item' with a label and an icon. Something like that:

<ion-item>
   <ion-label>Itens</ion-label>
   <ion-label><i class="icon-search"></i></ion-label>
</ion-item>

The problem is that IOS already use an icon in 'ion-item' by default. I don't want to change button mode just for android, I'd like still use native elements styles.

My question is: Is there any way to hide/show elements according to platform?

I saw someone talking about 'showWhen' property in Ionic 3 but apparently, is not working anymore...

I have some custom icons I want to use. Unless I learn how to use them with ion icon, i have to take <i> — LittleFish

Sergey Rudenko Sergey Rudenko · Accepted Answer · 2020-07-07T14:49:42

Ionic features "Platform" service that can programmatically give you context of current user's platform:

https://ionicframework.com/docs/angular/platform

You can import and inject it as documentation states:


import { Platform } from '@ionic/angular';
    
    @Component({...})
    export class MyPage {
      
      ios: boolean;
      android: boolean;
      
      constructor(public platform: Platform) {
          this.ios = platform.is('ios');
          this.android = platform.is('android');
      }

    }

Then you can simply bind components to the boolean properties:

<ion-item *ngIf="ios">
   <ion-label>Itens</ion-label>
   <ion-label><i class="icon-search"></i></ion-label>
</ion-item>

Show/hide elements according to platform in Ionic 5

1 Answers