fix(showHideWhen): remove hidden attribute on directives and use classes

Each directive applies a different class so they won’t remove each
other if they’re on the same element. If either class is applied the
element won’t display.

closes #5836

ionic/components.core.scss

@@ -23,6 +23,7 @@
   "components/modal/modal",
   "components/refresher/refresher",
   "components/scroll/scroll",
+  "components/show-hide-when/show-hide-when",
   "components/slides/slides",
   "components/spinner/spinner",
   "components/virtual-scroll/virtual-scroll";

ionic/components/show-hide-when/show-hide-when.scss

@@ -0,0 +1,14 @@
+@import "../../globals.core";
+
+// Show / Hide When
+// --------------------------------------------------
+
+// Applied by the showWhen directive
+.hidden-show-when {
+  display: none;
+}
+
+// Applied by the hideWhen directive
+.hidden-hide-when {
+  display: none;
+}

ionic/components/show-hide-when/show-hide-when.ts

@@ -91,7 +91,7 @@ export class DisplayWhen {
 @Directive({
   selector: '[showWhen]',
   host: {
-    '[hidden]': 'hidden'
+    '[class.hidden-show-when]': '!isMatch'
   }
 })
 export class ShowWhen extends DisplayWhen {
@@ -104,13 +104,6 @@ export class ShowWhen extends DisplayWhen {
     super(showWhen, platform, ngZone);
   }
 
-  /**
-   * @private
-   */
-  get hidden(): boolean {
-    return !this.isMatch;
-  }
-
 }
 
 /**
@@ -148,7 +141,7 @@ export class ShowWhen extends DisplayWhen {
 @Directive({
   selector: '[hideWhen]',
   host: {
-    '[hidden]': 'hidden'
+    '[class.hidden-hide-when]': 'isMatch'
   }
 })
 export class HideWhen extends DisplayWhen {
@@ -161,11 +154,4 @@ export class HideWhen extends DisplayWhen {
     super(hideWhen, platform, ngZone);
   }
 
-  /**
-   * @private
-   */
-  get hidden(): boolean {
-    return this.isMatch;
-  }
-
 }

ionic/components/show-hide-when/test/basic/main.html

@@ -56,4 +56,14 @@
     hideWhen="android,ios"
   </p>
 
+  <p hideWhen="ios" [hidden]="toggle" style="background:magenta; color:white">
+    hideWhen="ios" [hidden]=toggle
+  </p>
+
+  <p showWhen="android" hideWhen="landscape" style="background:black; color:white">
+    showWhen="android" hideWhen="landscape"
+  </p>
+
+  <button (click)="toggle = !toggle">Toggle Hide When</button>
+
 </ion-content>