diff --git a/packages/demos/angular/src/app/app-routing.module.ts b/packages/demos/angular/src/app/app-routing.module.ts
index d440aff028..9d80e39b1d 100644
--- a/packages/demos/angular/src/app/app-routing.module.ts
+++ b/packages/demos/angular/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   { path: '', redirectTo: '/home', pathMatch: 'full' },
   { path: 'basic-inputs', loadChildren: 'app/basic-inputs-page/basic-inputs-page.module#BasicInputsPageModule' },
+  { path: 'show-hide-when', loadChildren: 'app/show-hide-when/show-hide-when.module#ShowHideWhenModule' },
   { path: 'form-sample', loadChildren: 'app/form-sample-page/form-sample-page.module#FormSamplePageModule' },
   { path: 'group-inputs', loadChildren: 'app/group-inputs-page/group-inputs-page.module#GroupInputsPageModule' },
   { path: 'home', loadChildren: 'app/home-page/home-page.module#HomePageModule' },
diff --git a/packages/demos/angular/src/app/home-page/home-page.component.html b/packages/demos/angular/src/app/home-page/home-page.component.html
index 8246db096f..108a89feb4 100644
--- a/packages/demos/angular/src/app/home-page/home-page.component.html
+++ b/packages/demos/angular/src/app/home-page/home-page.component.html
@@ -4,6 +4,9 @@
 
 <div>
   <ul>
+    <li>
+      <a href='show-hide-when'>Show/Hide When Test Page</a>
+    </li>
     <li>
       <a href='basic-inputs'>Basic Inputs Test Page</a>
     </li>
diff --git a/packages/demos/angular/src/app/show-hide-when/show-hide-when-page.component.ts b/packages/demos/angular/src/app/show-hide-when/show-hide-when-page.component.ts
new file mode 100644
index 0000000000..f539019aaf
--- /dev/null
+++ b/packages/demos/angular/src/app/show-hide-when/show-hide-when-page.component.ts
@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-show-hide-page',
+  templateUrl: './show-hide-when.html'
+})
+export class ShowHideWhenComponent {
+  constructor() {}
+}
diff --git a/packages/demos/angular/src/app/show-hide-when/show-hide-when-routing.module.ts b/packages/demos/angular/src/app/show-hide-when/show-hide-when-routing.module.ts
new file mode 100644
index 0000000000..0e21eaad76
--- /dev/null
+++ b/packages/demos/angular/src/app/show-hide-when/show-hide-when-routing.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { ShowHideWhenComponent } from './show-hide-when-page.component';
+
+const routes: Routes = [
+  { path: '', component: ShowHideWhenComponent }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ShowHideWhenRoutingModule { }
diff --git a/packages/demos/angular/src/app/show-hide-when/show-hide-when.html b/packages/demos/angular/src/app/show-hide-when/show-hide-when.html
new file mode 100644
index 0000000000..b664295869
--- /dev/null
+++ b/packages/demos/angular/src/app/show-hide-when/show-hide-when.html
@@ -0,0 +1,164 @@
+<ion-app>
+  <ion-page class="show-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Test</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content padding>
+
+      <div>
+        <h2>Mode Tests</h2>
+        <ion-show-when mode="md, ios">
+          <div>Shows on MD, iOS</div>
+        </ion-show-when>
+
+        <ion-show-when mode="md">
+          <div>Shows on MD only</div>
+        </ion-show-when>
+
+        <ion-show-when mode="ios">
+          <div>Shows on iOS only</div>
+        </ion-show-when>
+
+        <ion-hide-when mode="md, ios">
+          <div>Hides on MD, iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="md">
+          <div>Hides on MD only</div>
+        </ion-hide-when>
+
+        <ion-hide-when mode="ios">
+          <div>Hides on iOS only</div>
+        </ion-hide-when>
+      </div>
+
+      <br>
+      <div>
+        <h2>Orientation Tests</h2>
+        <ion-show-when orientation="portrait">
+          <div>Shows on portrait orientation</div>
+        </ion-show-when>
+
+        <ion-show-when orientation="landscape">
+          <div>Shows on landscape orientation</div>
+        </ion-show-when>
+
+        <ion-hide-when orientation="portrait">
+          <div>Hides on portrait orientation</div>
+        </ion-hide-when>
+
+        <ion-hide-when orientation="landscape">
+          <div>Hides on landscape orientation</div>
+        </ion-hide-when>
+      </div>
+
+      <br>
+      <div>
+        <h2>Platform Tests</h2>
+
+        <ion-show-when platform="android,ios">
+          <div>Render on Android and iOS</div>
+        </ion-show-when>
+
+        <ion-show-when platform="ios">
+          <div>Only show on iOS</div>
+        </ion-show-when>
+
+        <ion-show-when platform="android">
+          <div>Only show on Android</div>
+        </ion-show-when>
+
+        <ion-show-when platform="ipad">
+          <div>Only show on ipad</div>
+        </ion-show-when>
+
+        <ion-show-when platform="phablet">
+          <div>Only show on phablet</div>
+        </ion-show-when>
+
+        <ion-show-when platform="iphone">
+          <div>Only show on phone</div>
+        </ion-show-when>
+
+        <ion-hide-when platform="android,ios">
+          <div>Hides on Android and iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ios">
+          <div>Only hide on iOS</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="android">
+          <div>Only hide on Android</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="ipad">
+          <div>Only hide on ipad</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="phablet">
+          <div>Only hide on phablet</div>
+        </ion-hide-when>
+
+        <ion-hide-when platform="iphone">
+          <div>Only hide on phone</div>
+        </ion-hide-when>
+      </div>
+
+      <br>
+      <div>
+        <h2>Size Tests</h2>
+        <ion-show-when size="xs">
+          <div>Only show on xs</div>
+        </ion-show-when>
+
+        <ion-show-when size="sm">
+          <div>Only show on sm</div>
+        </ion-show-when>
+
+        <ion-show-when size="md">
+          <div>Only show on md</div>
+        </ion-show-when>
+
+        <ion-show-when size="lg">
+          <div>Only show on lg</div>
+        </ion-show-when>
+
+        <ion-show-when size="xl">
+          <div>Only show on xl</div>
+        </ion-show-when>
+
+        <ion-show-when size="xs, m">
+          <div>Only show on XS or m</div>
+        </ion-show-when>
+
+        <ion-hide-when size="xs">
+          <div>Only hide on xs</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="sm">
+          <div>Only hide on sm</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="md">
+          <div>Only hide on md</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="lg">
+          <div>Only hide on lg</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xl">
+          <div>Only hide on xl</div>
+        </ion-hide-when>
+
+        <ion-hide-when size="xs, m">
+          <div>Only hide on XS or m</div>
+        </ion-hide-when>
+      </div>
+
+    </ion-content>
+  </ion-page>
+</ion-app>
diff --git a/packages/demos/angular/src/app/show-hide-when/show-hide-when.module.ts b/packages/demos/angular/src/app/show-hide-when/show-hide-when.module.ts
new file mode 100644
index 0000000000..ce0bb86760
--- /dev/null
+++ b/packages/demos/angular/src/app/show-hide-when/show-hide-when.module.ts
@@ -0,0 +1,15 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ShowHideWhenComponent } from './show-hide-when-page.component';
+import { ShowHideWhenRoutingModule } from './show-hide-when-routing.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ShowHideWhenRoutingModule
+  ],
+  declarations: [ShowHideWhenComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ShowHideWhenModule { }