Ionic 4 showWhen hideWhen

user_4823555 0
Viewed 5976

I'm trying to use the same html for both web and device and have cases where I need to show/hide either web html or device html.

Where are the showWhen and hideWhen directives in Ionic 4? If they are gone have they been replaced with something else?

As of now all I can find is some test page but that doesn't say much.

angular-directive ionic4 ionic-framework html
3 Answers

For upgrading my app to ionic 4 I used this alternative https://ionicframework.com/docs/utilities/platform to show the right buttons based on the device's OS, it works great and very easy to implement:

import { Component, OnInit} from '@angular/core';
import { Platform } from '@ionic/angular';

@Component({
  selector: 'update-password',
  templateUrl: './update-password.component.html'
})
export class UpdatePasswordComponent implements OnInit {

  constructor(
    public platform: Platform
  ) { }

<ion-header>
  <ion-toolbar>
    <ion-title>Update Password</ion-title>
    <ion-buttons slot="start">
      <ion-button (click)="dismiss()">
        <ion-text color="primary" *ngIf="platform.is('ios')">Cancel</ion-text>
        <ion-icon name="md-close" *ngIf="!platform.is('ios')"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
user_113184310

Yes, Ionic 4 has these directives;

ion-hide-when

and 

ion-show-when

for example if you want to show only in android;

<ion-show-when platform="android"> stuff </ion-show-when>

UPDATE

Apparently, these directives have just removed from Ionic 4 in the last beta version. See this link

user_33017440

There is an Ionic 4 code pen here which shows how you can achieve the same effect as the removed directives with styles, e.g. this span will show on iOS only.

<span class="hide show-ios">Show iOS</span>

user_23139840
Related