diff --git a/src/components/show-hide-when/hide-when.ts b/src/components/show-hide-when/hide-when.ts
new file mode 100644
index 0000000000..2d6265880c
--- /dev/null
+++ b/src/components/show-hide-when/hide-when.ts
@@ -0,0 +1,64 @@
+import { Attribute, Directive, NgZone } from '@angular/core';
+
+import { Platform } from '../../platform/platform';
+
+import { DisplayWhen } from './show-hide-when';
+
+/**
+ * @name HideWhen
+ * @description
+ * The `hideWhen` attribute takes a string that represents a plaform or screen orientation.
+ * The element the attribute is added to will only be hidden when that platform or screen orientation is active.
+ *
+ * Complements the [showWhen attribute](../ShowWhen). If the `hideWhen` attribute is used on an
+ * element that also has the `showWhen` attribute, the element will not show if `hideWhen` evaluates
+ * to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
+ * will not show if `hidden` evaluates to `true`.
+ *
+ * View the [Platform API docs](../../../platform/Platform) for more information on the different
+ * platforms you can use.
+ *
+ * @usage
+ * ```html
+ * <div hideWhen="android">
+ *  I am hidden on Android!
+ * </div>
+ *
+ * <div hideWhen="ios">
+ *  I am hidden on iOS!
+ * </div>
+ *
+ * <div hideWhen="android,ios">
+ *  I am hidden on Android and iOS!
+ * </div>
+ *
+ * <div hideWhen="portrait">
+ *  I am hidden on Portrait!
+ * </div>
+ *
+ * <div hideWhen="landscape">
+ *  I am hidden on Landscape!
+ * </div>
+ * ```
+ *
+ * @demo /docs/v2/demos/src/hide-when/
+ * @see {@link ../ShowWhen ShowWhen API Docs}
+ * @see {@link ../../../platform/Platform Platform API Docs}
+*/
+@Directive({
+  selector: '[hideWhen]',
+  host: {
+    '[class.hidden-hide-when]': 'isMatch'
+  }
+})
+export class HideWhen extends DisplayWhen {
+
+  constructor(
+    @Attribute('hideWhen') hideWhen: string,
+    plt: Platform,
+    zone: NgZone
+  ) {
+    super(hideWhen, plt, zone);
+  }
+
+}
diff --git a/src/components/show-hide-when/show-hide-when.ts b/src/components/show-hide-when/show-hide-when.ts
index 13ad8f65a0..bff5ba9c33 100644
--- a/src/components/show-hide-when/show-hide-when.ts
+++ b/src/components/show-hide-when/show-hide-when.ts
@@ -114,64 +114,3 @@ export class ShowWhen extends DisplayWhen {
   // ngOnDestroy is implemente in DisplayWhen
 
 }
-
-/**
- * @name HideWhen
- * @description
- * The `hideWhen` attribute takes a string that represents a plaform or screen orientation.
- * The element the attribute is added to will only be hidden when that platform or screen orientation is active.
- *
- * Complements the [showWhen attribute](../ShowWhen). If the `hideWhen` attribute is used on an
- * element that also has the `showWhen` attribute, the element will not show if `hideWhen` evaluates
- * to `true` or `showWhen` evaluates to `false`. If the `hidden` attribute is also added, the element
- * will not show if `hidden` evaluates to `true`.
- *
- * View the [Platform API docs](../../../platform/Platform) for more information on the different
- * platforms you can use.
- *
- * @usage
- * ```html
- * <div hideWhen="android">
- *  I am hidden on Android!
- * </div>
- *
- * <div hideWhen="ios">
- *  I am hidden on iOS!
- * </div>
- *
- * <div hideWhen="android,ios">
- *  I am hidden on Android and iOS!
- * </div>
- *
- * <div hideWhen="portrait">
- *  I am hidden on Portrait!
- * </div>
- *
- * <div hideWhen="landscape">
- *  I am hidden on Landscape!
- * </div>
- * ```
- *
- * @demo /docs/v2/demos/src/hide-when/
- * @see {@link ../ShowWhen ShowWhen API Docs}
- * @see {@link ../../../platform/Platform Platform API Docs}
-*/
-@Directive({
-  selector: '[hideWhen]',
-  host: {
-    '[class.hidden-hide-when]': 'isMatch'
-  }
-})
-export class HideWhen extends DisplayWhen {
-
-  constructor(
-    @Attribute('hideWhen') hideWhen: string,
-    plt: Platform,
-    zone: NgZone
-  ) {
-    super(hideWhen, plt, zone);
-  }
-
-  // ngOnDestroy is implemente in DisplayWhen
-
-}