Ionic-framework: showWhen/hideWhen not working Beta 6

[SP1966]

showWhen/hideWhen is not working.

`

<ion-buttons left>
    <button showWhen="android" (click)="onCancel()" >
      <ion-icon name="close"></ion-icon>
    </button>
    <button showWhen="ios" (click)="onCancel()" >Cancel</button>
  </ion-buttons>

  <ion-title>Add Location</ion-title>

 <ion-buttons end>
    <button showWhen="android" (click)="onSubmit()" >
      <ion-icon name="checkmark"></ion-icon>
    </button>
    <button showWhen="ios" (click)="onSubmit()" >Done</button>
</ion-buttons>


</ion-navbar>

`

Version 2 Beta 6

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.6
Ionic CLI Version: 2.0.0-beta.25
Ionic App Lib Version: 2.0.0-beta.15
ios-deploy version: 1.8.6
ios-sim version: 5.0.6
OS: Mac OS X El Capitan
Node Version: v5.1.0
Xcode version: Xcode 7.3 Build version 7D175

[brandyscarney]

So I looked into this some more, and it is because the button's display property is taking precedence over the showWhen/hideWhen classes. As a temporary fix, you should be able to add the following css to your app.core.scss file (or any other sass file that comes after the ionic imports):

// Applied by the showWhen directive
.hidden-show-when {
  display: none !important;
}

// Applied by the hideWhen directive
.hidden-hide-when {
  display: none !important;
}

I'll work on fixing this in the framework. Thanks for the issue!

[SP1966]

Thanks once again Brandy, you're awesome!!