diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 52cf434d10..f509d64930 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -1135,6 +1135,7 @@ declare global {
       mediaQuery?: string;
       mode?: string;
       or?: boolean;
+      orientation?: string;
       platform?: string;
       size?: string;
     }
@@ -2906,6 +2907,7 @@ declare global {
       mediaQuery?: string;
       mode?: string;
       or?: boolean;
+      orientation?: string;
       platform?: string;
       size?: string;
     }
diff --git a/packages/core/src/components/show-when/readme.md b/packages/core/src/components/show-when/readme.md
index 55cc543fad..9d836547e3 100644
--- a/packages/core/src/components/show-when/readme.md
+++ b/packages/core/src/components/show-when/readme.md
@@ -22,6 +22,11 @@ string
 boolean
 
 
+#### orientation
+
+string
+
+
 #### platform
 
 string
@@ -49,6 +54,11 @@ string
 boolean
 
 
+#### orientation
+
+string
+
+
 #### platform
 
 string
diff --git a/packages/core/src/components/show-when/show-when.tsx b/packages/core/src/components/show-when/show-when.tsx
index 4f674e7b34..3d2c195705 100644
--- a/packages/core/src/components/show-when/show-when.tsx
+++ b/packages/core/src/components/show-when/show-when.tsx
@@ -1,9 +1,9 @@
-import { Component, Element, Prop } from '@stencil/core';
+import { Component, Element, Listen, Prop, State } from '@stencil/core';
 import { Config, PlatformConfig } from '../../index';
 
 import {
   DisplayWhen,
-  componentWillLoadImpl,
+  updateTestResults,
 } from '../../utils/show-hide-when-utils';
 
 @Component({
@@ -16,16 +16,18 @@ export class ShowWhen implements DisplayWhen {
   @Prop({ context: 'config' }) config: Config;
   @Prop({ context: 'platforms' }) calculatedPlatforms: PlatformConfig[];
 
+  @Prop() orientation: string = null;
   @Prop() mediaQuery: string = null;
   @Prop() size: string = null;
   @Prop() mode: string = null;
   @Prop() platform: string = null;
   @Prop() or = false;
 
-  passesTest = false;
+  @State() passesTest = false;
 
+  @Listen('window:resize')
   componentWillLoad() {
-    return componentWillLoadImpl(this);
+    return updateTestResults(this);
   }
 
   hostData() {
diff --git a/packages/core/src/components/show-when/test/basic/index.html b/packages/core/src/components/show-when/test/basic/index.html
index 35fa1b4c0a..ff9c38a580 100644
--- a/packages/core/src/components/show-when/test/basic/index.html
+++ b/packages/core/src/components/show-when/test/basic/index.html
@@ -29,8 +29,17 @@
         </ion-show-when>
 
         <ion-show-when mode="ios">
-            <div>Shows on iOS only</div>
-          </ion-show-when>
+          <div>Shows on iOS only</div>
+        </ion-show-when>
+
+        <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>
 
         <h2>Platform Tests</h2>
 
@@ -80,8 +89,8 @@
         </ion-show-when>
 
         <ion-show-when size="xs, m">
-            <div>Only render on XS or m</div>
-          </ion-show-when>
+          <div>Only render on XS or m</div>
+        </ion-show-when>
 
       </ion-content>
 
diff --git a/packages/core/src/utils/show-hide-when-utils.ts b/packages/core/src/utils/show-hide-when-utils.ts
index e0f6d2b3b4..fc647738d4 100644
--- a/packages/core/src/utils/show-hide-when-utils.ts
+++ b/packages/core/src/utils/show-hide-when-utils.ts
@@ -1,6 +1,6 @@
 import { Config, PlatformConfig } from '../index';
 
-export function componentWillLoadImpl(displayWhen: DisplayWhen) {
+export function updateTestResults(displayWhen: DisplayWhen) {
   displayWhen.passesTest = getTestResult(displayWhen);
 }
 
@@ -61,6 +61,9 @@ export function getTestResult(displayWhen: DisplayWhen) {
     const platformNames = displayWhen.calculatedPlatforms.map(platformConfig => platformConfig.name);
     resultsToConsider.push(isPlatformMatch(platformNames, displayWhen.platform));
   }
+  if (displayWhen.orientation) {
+    resultsToConsider.push(isOrientationMatch(displayWhen.orientation));
+  }
 
   if (!resultsToConsider.length) {
     return true;
@@ -76,6 +79,20 @@ export function getTestResult(displayWhen: DisplayWhen) {
   });
 }
 
+export function isOrientationMatch(orientation: string) {
+  if (orientation == 'portrait') {
+    return isPortrait();
+  } else if (orientation === 'landscape') {
+    return !isPortrait();
+  }
+  // it's an invalid orientation, so just return it
+  return false;
+}
+
+export function isPortrait(): boolean {
+  return window.matchMedia('(orientation: portrait)').matches;
+}
+
 const sizeToMediaQueryMap = new Map<string, string>();
 sizeToMediaQueryMap.set('xs', '(min-width: 0px)');
 sizeToMediaQueryMap.set('sm', '(min-width: 576px)');
@@ -89,6 +106,7 @@ export interface DisplayWhen {
   mediaQuery: string;
   mode: string;
   or: boolean;
+  orientation: string;
   passesTest: boolean;
   platform: string;
   size: string;